Viewing 11 posts - 1 through 11 (of 11 total)
  • Author
    Posts
  • February 20, 2017 at 11:47 am #749273
    philoakley

    Hi
    I am trying to underline H1 headings with a thick black line with a significant gap under (say 18px) that works end to end of the title. The (fat) line item works fine on desktop but on mobile resizes so it does not underline the word properly.

    Is there a way to get an underline to stay end to end of the word in this style whatever the size of screen?

    Many thanks.

    February 21, 2017 at 6:59 am #749746
    Rikard

    Hey philoakley,

    Could you post a link to the site in question so that we can take a closer look please?

    Best regards,
    Rikard

    February 25, 2017 at 11:43 am #751750
    philoakley

    login details and links below in the content box

    February 27, 2017 at 1:33 pm #752243
    philoakley

    Hi Rikard. Any feedback appreciated. Many thanks Phil

    March 1, 2017 at 7:07 am #753452
    Rikard

    Hi Phil,

    Sorry for the late reply. Please try the following in Quick CSS under Enfold->General Styling:

    h1#seed-csp4-headline {
    border-bottom: 5px solid black;
    padding-bottom: 10px;
}

    Adjust the values to your liking.

    Best regards,
    Rikard

    March 1, 2017 at 3:02 pm #753747
    philoakley

    Hi Rikard

    Sorry, that does not appear to work for me. What does the #seed-csp4-headline do?

    All of my heading text in normal enfold content text boxes as ASSOCIATE heading on http://www.sparkspace.co.uk/space/flexi-office/

    Any help appreciated. Many thanks.

    March 2, 2017 at 12:39 pm #754311
    philoakley

    HI Rikard. Any thoughts appreciated. Kind regards Phil

    March 3, 2017 at 6:04 am #754823
    Rikard

    Hi,

    That is the ID of the first header on your page, but you want the CSS to apply to all H1 elements? If so then please try this instead:

    h1 {
    border-bottom: 5px solid black;
    padding-bottom: 10px;
}

    Please note that when you reply to your own topic you send it to the back of our support queue.

    Best regards,
    Rikard

    March 3, 2017 at 12:50 pm #755010
    philoakley

    Thanks Rikard

    Unfortunately, this appears to put a solid grey line the whole width of the box. Is there a way to force black and just underline the text? Example – https://cloudup.com/c25qJ4fYiuP

    Many thanks for your help.

    March 7, 2017 at 12:38 am #756675
    philoakley

    Not bumping my own post but just posting my attempts, in case it helps anyone else, not perfect but appears to do the job for me. I used the H6 heading style

    H6  {
  font-size:34px;
  border-bottom: 2.5px;
  border-bottom-style: solid;
  border-bottom-color: #000000; !important;
  display: inline-block;
  line-height:1.5em;
  margin-bottom:14px;
}

    The display: inline-block overrides any text alignment so to center I used custom css:

    .center-horizontal {
     position: absolute;
     left: 50%;
     transform: translateX(-50%);
}

    I also had to add some white space to the mobile view to compensate for the text wrapping.

    Any comments or improvements appreciated.

    March 8, 2017 at 4:00 pm #757869
    Andy

    Hi,

    glad you could figure it out! Let us know in a new ticket if you have some more issues or questions about the theme. We’re happy to support you.

    Best regards,
    Andy

  • Author
    Posts
Viewing 11 posts - 1 through 11 (of 11 total)
  • The topic ‘Underline Headings’ is closed to new replies.