Devider Line - Custom width

carromco1 · April 2018

Hey i need some help with the divider line. I use the devider as a shortcode in a columnsection (muffin builder). ( shown below)

I want to change the width of the line, because the "narrow" option is to short and the other "defult and width" option goes over the complete column.

And i want that it stops a little bit after the h1 tag, so i need my on width in px.

Can you help me with that?

<p><h1>TITEL IN CAPITALS HERE</h1></p>

[hr height="5" style="default" line="default" themecolor="1"]

Fusce ut velit laoreet, tempus arcu eu, molestie tortor. Nam vel justo cursus, faucibus lorem eget, egestas eros. Maecenas eleifend erat at justo fringilla imperdiet id ac magna. Suspendisse vel facilisis odio, at ornare nibh. In malesuada, tortor eget sodales mollis, mauris lectus hendrerit purus, porttitor finibus eros lorem eget mauris. Curabitur lacinia enim at ex blandit, vel pellentesque odio elementum.

Bryan · April 2018

Hi,
then you will need to use a hr line but with HTML, not a shortcode.
<hr style="width:200px; background:red;" />
thanks

carromco1 · April 2018

Thank you, that worked.

i altought tried this, because i didnt want to change everything manually

hr {

display: block;

border: none;

outline: none;

height: 2px;

width: 45%;

margin: 10px 0px 10px 0px !important;

}

This worked perfekt... I would love to use this custom css for my portfolio single pages, but there is noch Custom CSS field at the end?! Is it normal at the Portfolio Singles?

Any idea how i could use this for all Portfolio Singles at once?

Bryan · April 2018

You have to inspect the code and check the classes added to the tag.
In this case this will target all HR element in the single portfolios:


.single-portfolio hr {
    display: block;
    border: none;
    outline: none;
    height: 2px;
    width: 45%;
    margin: 10px 0px 10px 0px !important;
}

carromco1 · April 2018

It works perfektly! Thank you very much for your support.

Devider Line - Custom width

Comments