Viewing 10 posts - 1 through 10 (of 10 total)
  • Author
    Posts
  • July 3, 2018 at 8:53 pm #980753
    Moondreamer21

    I’d like to decrease the space above the Special page/post headings (h3) on both desktop and mobile. This css doesn’t seem to work:

    .av-special-heading.av-special-heading-h3{
    /*styling for dashed underline under page headings*/
    padding-top: -20px;
    border-bottom: 2px dashed #CCBDB8!important;
    padding-bottom: 10px;
    }

    @media only screen and (max-width: 767px) {
    /*styling for dashed underline under page headings*/
    .av-special-heading.av-special-heading-h3{
    margin-top:-20px!important;
    padding-bottom:35px!important;
    }}

    July 4, 2018 at 4:59 am #980906
    Ismael

    Hey Moondreamer21,

    Thank you for using Enfold.

    Where can we see these headings? Please provide a link so that we can inspect it or post a screenshot.

    Best regards,
    Ismael

    July 4, 2018 at 1:02 pm #981149
    Moondreamer21

    Sorry, it’s on the home page of my site. Will post in the PC.

    July 5, 2018 at 11:57 am #981541
    Ismael

    Hi,

    Thanks for the info.

    You can use the following css code to adjust the heading.

    #top #wrap_all h3.av-special-heading-tag {
    margin-top: -20px;
    border-bottom: 2px dashed #CCBDB8!important;
    padding-bottom: 10px;
}

@media only screen and (max-width: 767px) {
#top #wrap_all h3.av-special-heading-tag {
    margin-top:-20px!important;
    padding-bottom:35px!important;
}
}

    Best regards,
    Ismael

    July 5, 2018 at 8:37 pm #981727
    Moondreamer21

    Thanks for the code. That helped a little but the dashed line only underlined the actual heading text. I need it to extend across the width of the content.

    I have used this code to get close to what I want:

    #top #wrap_all h3.av-special-heading-tag {
    margin-top: -30px;
    }

    .av-special-heading.av-special-heading-h3{
    /*styling for dashed underline under page headings*/
    border-bottom: 2px dashed #CCBDB8!important;
    margin-bottom: -30px!important;
    }

    The heading text and content text is spaced/aligned how I want it with this, but the dashed underline is too low (in the content text) – I want it centered between (see site home page). I have worked on this for hours trying every possible css combination I can think of… every time either achieving no result or mis-aligning it completely. Please advise.

    July 6, 2018 at 6:44 am #981838
    Ismael

    Hi,

    Add the width property to extend the border or make it full width.

    #top #wrap_all h3.av-special-heading-tag {
    margin-top: -30px;
    border-bottom: 2px dashed #CCBDB8!important;
    padding-bottom: 10px;
    width: 100%;
}

    Best regards,
    Ismael

    July 9, 2018 at 4:17 am #982928
    Moondreamer21

    Thanks, the problem I had with the code you provide initially was that it the dashed underline wasn’t full width.

    But then I spent several hours making numerous adjustments and finally got it very close to what I need (width is fine).

    The only problem, like I mentioned above, is that the heading text and content text is spaced/aligned how I want, BUT the dashed underline is too low (in the content text) – I want it centered between the content text & the heading (see site home page).

    I worked on this for hours trying every possible css combination I can think of… every time either achieving no result or mis-aligning it completely.
    If you could see what I have put together then offer an adjustment base on that, I’d appreciate it!

    July 9, 2018 at 10:47 pm #983423
    Moondreamer21

    I switched things up again and used the code you recommended with the 100% width.
    Everything it looking good now except there is too much space below the dashed line on mobile only.
    Any CSS I have used doesn’t get a result at all.

    Here’s what I’m using:

    #top #wrap_all h3.av-special-heading-tag {
    margin-top: -10px;
    border-bottom: 2px dashed #CCBDB8!important;
    padding-bottom: 10px;
    width: 100%;
    }

    @media only screen and (max-width: 767px) {
    #top #wrap_all h3.av-special-heading-tag {
    margin-top:-20px!important;
    }
    }

    July 9, 2018 at 10:54 pm #983425
    Moondreamer21

    Never mind, I think I have it all fixed!
    I’d like to keep this open for a day or two to make sure – but thanks!

    July 10, 2018 at 12:10 am #983445
    Ismael

    Hi,

    Glad it is fixed. We’ll keep the thread open.

    Best regards,
    Ismael

  • Author
    Posts
Viewing 10 posts - 1 through 10 (of 10 total)
  • You must be logged in to reply to this topic.