Column Element - Child Layout; Grid

[jdsn]

Hey,

I’m having a really hard time trying to properly align a column element with 4 images and some text underneath.

All of the images in their raw format are the same size.

I’ve added a 4 column element to my page and selected the Grid layout for the Child layout.

As soon as I enter any text underneath the images it immediately resizes the images.

I can’t seem to get them all of the same size, although the text is slightly different lengths they are all fairly similar.

I’ve attached a screenshot that demonstrates the problem I’m having.

The outcome I’m looking for is 4 boxes of the same size which then move into a grid layout on smaller screens.

Any help to get these lined up would be greatly appreciated!

KR,
James

[maddy]

Hi @jdsn,

Can you share a link to the Builder page this is occurring on?

[jdsn]

Hi Maddy,

Thanks for getting back to me, here you go;

Builder.io: Drag and drop page builder and CMS

[jdsn]

Hi Maddy, was that link I sent through ok? Did you manage to take a look?

Thanks in advance.

[logan]

Hi James! We took a look at your link and it looks like your columns are looking pretty spiffy! Is there something that still needs work?

[jdsn]

Hi Logan, thanks for getting back to me. Unfortunately, the columns only seem to work for me when the child layout is ‘Stacked’ as in the preview. As soon as I select a grid layout for example, the images start changing size when I type anything. Here is a screenshot as an example.

The top box is a column element with a stacked child layout. The second is a duplicated version, as soon as I click the grid layout everything resizes and moves around. Is there any easy way to get the grid feature to be as lined up as the top version?

[jdsn]

Hi Logan/Maddy,

Any ideas on the above?