Large typography with consistent padding

[cives]

Hi all –

I’m very close to achieving the attached screenshots, though i’m not quite there yet. My challenge is getting the coded version (screenshot 2), to look identical to the mock (screenshot 1).

The site is coded w/ bootstrap and this is the structure of that section:

With some minor css tweaks I’ve been able to come close, but I am having some overlapping issues and in consistencies. If I give it too much padding, it wants to wrap to another row.

Any suggestions? Perhaps a psuedo element?

Cheers

[Paulie_D]

Images of code are of no value unfortunately.

A Codepen.io demo is what we need.

[cives]

This will probably be even more helpful: http://697792-hs-sites-com.sandbox.hs-sites.com/about

you can use inspect tool to view the css, etc.

[Paulie_D]

Actually no, a Codepen.io demo is preferable since the HTML & CSS is right there and we don’t have to use Inspect.

We can also fork the Pen with our own code to suggest improvements/tweaks.

Help us help you, make a minimal demo in Codepen.io.

[JeroenR]

There are probably several ways to achieve this.
I would set the line-height of the class .numlg to 0.75 or something like that. And set the background color in the :after of the first column DIV in the row with the numbers in it (the one with these classes col-md-8 col-md-offset-2 text-center-m). Instead of the separate blue underlay DIV.
Then I wouldn’t use the top padding in the next row.
This way the whole thing is wrapped in the same row.

Something like this: https://codepen.io/jeroenreijs/pen/GyqPRB

[Author]

Posts