Home App Docs Blog Github

Column Element - Child Layout; Grid

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

Hi @jdsn,

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

Hi Maddy,

Thanks for getting back to me, here you go;

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

Thanks in advance.

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?

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?

Hi Logan/Maddy,

Any ideas on the above?