Images filling width of column, with text element centred on it

[gratmaf]

Hi there,
I’ve tried to find the same topic somewhere, without any success.

In order to create a grid of six pictures with text on it, I’ve created 2 distinct sections of 3 columns each.
My goal is to set 6 different pictures in every columns and specific text on it.

To achieve that, in every columns I’ve set a background upper layer to put the pictures. Then I’ve added a text element.

Because text content is not the same, I’m struggling to get the same picture size. I’ve seen also that with the resolution 768px-979px, the text is not centred anymore on the right side (International Family). It seems that because the text is longer than the text box, it can’t fit it.

I would like to get, the six images + text block all the same sizes, same alignment and responsive (even if the text becomes lower, it’s ok). Each block are clickable, bringing to specific pages.

Could you please help me to understand how I should approach this matter and to achieve that.

Thank you very much!

[jade]

HI Mathias,

You can achieve this by setting a class to the container of the columns and set the display to flex so that the columns will have the same height.

Here is an article that shows you how to do that:

Create Columns with Equal Heights

Hope this helps.

[gratmaf]

Hi @Jade,

thanks a lot for your quick answer and the link of MB on the subject.

I’ll play with that, editing CSS.
Thanks again for your help.

Cheers

[jade]

You’re most welcome, Mathias.