Equal height for content boxes in a row

This topic contains 5 replies, has 3 voices, and was last updated by  Sebastian 4 years, 4 months ago.

Author Posts

laucocos

Hello,

I have designed certain pages using 3 or 4 content boxes that sit alongside one another in a row. I am having difficulty making them have equal height on all devices. The pages are https://www.inspiratti.com/blog/ and https://www.inspiratti.com/services/

I have tried to use the dimensions and Flexbox options in Microthemer to solve this problem, but it is still not working properly.

Any help would be much appreciated.

Best,
Laura


Sebastian

Hey Laura,

You mean the 4 boxes on this page: https://www.inspiratti.com/blog/

Content Marketing
Social Media
Email Marketing
Branding

Looking at your site, I can see that your page builder is applying large amounts of padding around the text in order to create the shape of the boxes. But the boxes become misaligned when the text must flow over multiple lines in some boxes but not others at lower screen sizes.

Your page builder adds padding on the page using the !important CSS declaration so it will be difficult to apply a totally new method of displaying the boxes. And so as a workaround, you could create a selector that targets the h4 element in all 4 boxes. And then give this a min-height value that accommodates 2-3 lines of text. I say 3 lines because just before the breakpoint moves the boxes into 2-column rows it, the text displays on 3 lines. However, it might be best to solve that by triggering the 2 column layout a bit earlier or reducing the font-size of the text a bit.

This method should work for your services page too.

Cheers,
Sebastian


Abland

Hi, Laura – Hi, Sebastian,

I hope you don’t mind if I throw in my two cents. A quick fix might be to target the page specific container row and add a height while hiding the overflow.

Suggested css to target specific rows

Set the height to what’s needed. Smaller screens seem to render fine. I didn’t test too deeply so the rows might need a bit more specific targeting…


Sebastian

@abland – your two cents are always welcome here. Thanks for providing an alternative solution. I hope one of these will help Laura 🙂

Cheers,
Sebastian


laucocos

Thank you both – this works well 🙂


Sebastian

Great!

You must login or register to reply to this topic.