Geometry Grid Not showing on mobile

[lostimagination]

Hello, I am currently using the Geometry grid cloud template that you guys have to build a simple team page I was able to get 4 people to show on desktop view and laptop, but on mobile is only showing 2. I have 12 people I would like to add.

Desktop view should show 4 columns
Laptop view should show 4 columns
Tablet and below should show 1 columns

I added the link and password in notes. Thank you any help is greatly appriciated!

[ruenel]

Hello @lostimagination,

Thanks for writing in!

regretfully we cannot check your site because the given password is incorrect. Please edit your Grid and remove the Cell Placements. You should be using Auto.

Kindly let us know how it goes.

[lostimagination]

Hello Ruenel, I checked, and still the same. I just fixed the password, now you may use it. Same one on the secure note. Thank you!

[tristup]

Hi @lostimagination,

I have a thorough discussion with my colleague Christian and we found that the Geometry Grid is not appropriate for the layout you are trying to acheive. I would suggest you move to the Row > Column structure by adding the cell content to the columns. To adjust the content into the column, you can add the Row inside the column.

Hope it helps.
Thanks

[lostimagination]

Thank you, that worked. The only thing is the columns are not equal below. See the Screenshot below;

I want them to be like this;

Thank you for your help!

[tristup]

Hi @lostimagination,

You need to set the same background color, border-radius, and box-shadow to each of the columns and add the Inner Row as suggested in my previous reply. I went ahead and added that and add an x-card class to the Column > Row > Column 2 containing the Headline element for each of the columns.

Then added the following custom JavaScript code into the Page JS to make that column in equal height for all the sections.

jQuery(document).ready(function($){	
        var max=0;
        jQuery(".x-card").each(function(index, el) {
            console.log( jQuery(el).height() );
        
            if( jQuery(el).height() > max ){
                max = jQuery(el).height();
            }
        });
        jQuery(".x-card").css('height', max);
});

And now it is looking like the following screenshot.

Thanks