How to get my title neatly aligned

Author Posts

Martin_1

Hi,

I am working on this page https://www.wintherbikes.com/safety-features/ and as you can see, the black titles next to the numbers in the right column are being broken into more lines (especially visible on smaller screens). The second line is no longer aligned and moves the the left.

The number in front of the title is set to display: inline-block
The text below the title is set to display: block

How can I get the title to stay aligned?


Sebastian

Hi Martin,

You need to wrap the .safety-title-first and .safety-text-first elements in a container element. Then set display:flex on the parent p element. That way, two columns will be created, and the text will not flow below the .safety-number-first element.

Cheers,
Sebastian


Martin_1

Hi Sebastian,

I am a bit confused. I placed the title and text inside a div (which places the title and text below the number) and set the display to flex. which indeed creates two columns. On the left the title and on the right the text. But I need two rows and they need to be next to the number.

Man I am so confused LOL


Martin_1

Never mind. Someone in the Avada theme Facebook group came up with a solution.


Martin_1

.ptext {
padding-left: 30px;
}

.h2a, .h2b, .h2c, .h2d, .h2e, .h2f {
padding-left: 30px;
}

.h2f::before {
color: #000000;
font-size: 12px;
background-color: #ffffff;
padding: 5px 9px 5px 9px;
margin-right: 10px;
margin-left: -34px;
border-radius: 50%;
content: “F”;
}


Sebastian

Great, I’m glad you found a solution. I did take a quick peak at your site just before my wife went into labour. The reason my flexbox suggestion didn’t work was because the div element you used to wrap the text was placed outside of the p tag. The WordPress editor may have auto-formatted things that way (it does do that sometimes). Just FYI!

Cheers,
Sebastian


Martin_1

Congratulations!

I hope all is well with your wife and newborn.

Regards,

Martin

You must login or register to reply to this topic.