Any way to add divider under page title but with a controlled width?

  • Resolved shakirahmed

    (@shakirahmed)


    9 months ago

    I just want to make a divider under the page title with a controlled width. I know I can do a whole-width border-bottom using the CSS below:

    [data-prefix=”single_page”] .entry-header .page-title {
    –theme-font-size: 37px;
    –theme-line-height: 1.5;
    border-bottom: 1px solid;
    }

    But, not finding any way to shorten the width of the divider. I have attached an image here https://prnt.sc/Gsbp2vBhaYjV . If you see that, you can understand it easily. I know; I am using a free theme. I will be grateful for your kind help.

    Regards
    Shakir

    Attachment(s)

    The page I need help with: [log in to see the link]

Viewing 8 replies - 1 through 8 (of 8 total)
  • Eduard

    (@cteduard)

    Hi @shakirahmed

    You should be able to use the font controls to add an underline like that. Something like this, perhaps? – https://ibb.co/4104KBK

    Let me know if this works for you.

    Thanks.

    Thread Starter shakirahmed

    (@shakirahmed)

    How can do the @cteduard

    Hello @shakirahmed

    Did you take a look at the screenshot? The path is Customiser -> Single Post -> Post Title -> Design tab.

    Thanks.

    Thread Starter shakirahmed

    (@shakirahmed)

    Oh…just saw it and it adds text-decoration: underline. That good but I want to control the width of this underline. Suppose there are 8 words in a title but I just want to show this underline for the first 2 words or 25% of the total width. Is there any for that?

    Hello @shakirahmed

    That wouldn’t be possible, I’m afraid, as the text-decoration CSS propriety does not work like that.

    Sorry, but that’s how things go.

    Thanks.

    Thread Starter shakirahmed

    (@shakirahmed)

    @cteduard, Interestingly I added the below CSS code in the theme’s custom CSS box.

    .entry-header .page-title:before {
    content: “”;
    position: absolute !important;
    width: 15% !important;
    height: 1px !important;
    bottom: 0 !important;
    border-bottom: 2px solid #C50705 !important;
    }

    It showed perfectly what I was looking for (you may see the screenshot here https://ibb.co/hZGwY8x). But after saving and publishing, it is not showing on the front page.

    Thread Starter shakirahmed

    (@shakirahmed)

    Hey @cteduard,

    Finally I could do this by using the below CSS code:

    .entry-header .page-title{
    position: relative;
    }

    .entry-header .page-title:before {
    content: “”;
    position: absolute;
    width: 10%;
    height: 1px;
    bottom: 0;
    border-bottom: 2px solid #C50705;
    }

    You can check live it here : https://www.royalgrowing.com/contact-us.html

    Thank you for the nice theme.

    I understand, @shakirahmed. However, our policy does not provide support for custom code. ??

    Glad you got it working, though. ??

    Take care.

Viewing 8 replies - 1 through 8 (of 8 total)
  • The topic ‘Any way to add divider under page title but with a controlled width?’ is closed to new replies.

Tags