Aligning Containers In A Grid

Hi Jodie,

For clarity, can you take a screenshot of what the Grid looks like from your end?

Uploading Screenshots: https://docs.generatepress.com/article/using-the-premium-support-forum/#uploading-screenshots

Hi Fernando, sure! I've got it how I want it to look on desktop, but the images are stacking on mobile, which I don't want them to do. I've included a screenshot, so you can see what I mean. Thanks for your help as always!

I see. Thank you for clarifying!

You just need to change the Grid Item Width of your Grid's Containers to 33% on mobile.

Example: https://share.getcloudapp.com/RBur0gyL

Hi Fernando, I've done as you've instructed, but it doesn't seem to be working. What am I doing wrong? Thanks for your help!

Can you provide admin login credentials? I'll take a closer look.

Please use the Private Information field for this: https://docs.generatepress.com/article/using-the-premium-support-forum/#private-information

Sure, here you are.

Hi there,

what happens if you regenerate the CSS in GenerateBlocks > Settings ?

Hi David, I did as you instructed, but no luck unfortunately! What else should I try?

Hmm... that is odd, the CSS is being overwritten but i cant see how. It could be a bug in the Widget area. I will do some tests.

For now:

1. Add this CSS:

.gb-grid-wrapper.mobile-row .gb-grid-column {
    width: 33% !important;
}

2. Select that Grid block and in Advanced > Additional CSS Class(es) add: mobile-row

Hi David, that worked, thank you! Any idea how I can decrease the horizontal gaps between each image?

Most of the space comes from the image width is set to 70px, and the grid columns are a % of the total width so that space will change.... as alternative instead of using a container > grid > image layout. Try this one:

<!-- wp:generateblocks/container {"uniqueId":"5f38cba2","isDynamic":true,"blockVersion":3,"display":"flex","columnGap":"10px","sizing":{"width":"","maxWidth":"max-content"},"marginRight":"auto","marginLeft":"auto"} -->
<!-- wp:generateblocks/image {"uniqueId":"67c4e2c4","sizeSlug":"full","width":"70px"} -->
<figure class="gb-block-image gb-block-image-67c4e2c4"><img class="gb-image gb-image-67c4e2c4" src="https://picsum.photos/id/237/70/50" alt=""/></figure>
<!-- /wp:generateblocks/image -->

<!-- wp:generateblocks/image {"uniqueId":"c8c3e7fa","sizeSlug":"full","width":"70px"} -->
<figure class="gb-block-image gb-block-image-c8c3e7fa"><img class="gb-image gb-image-c8c3e7fa" src="https://picsum.photos/id/237/70/50" alt=""/></figure>
<!-- /wp:generateblocks/image -->

<!-- wp:generateblocks/image {"uniqueId":"b1602612","sizeSlug":"full","width":"70px"} -->
<figure class="gb-block-image gb-block-image-b1602612"><img class="gb-image gb-image-b1602612" src="https://picsum.photos/id/237/70/50" alt=""/></figure>
<!-- /wp:generateblocks/image -->
<!-- /wp:generateblocks/container -->

Copy and Paste that into draft page in code editor view ( from 3 dot menu ), then switch to visual editor.

Its construct is:

1 x Container Block:
Layout - Display -> Flex
Layout - Column Gap: 10px

Spacing - Left & Right Margin set to: auto
this will center the container

Sizing - Max Width: max-content
this will set the containers width to the total width of its contents.

3 x Image blocks inside that container
Block Settings - Width: 70px

Hi David, thanks for that! As the block is in a footer bar, I can't seem to be able to find a button to use the code editor or to edit a GenerateBlocks block as HTML. What am I doing wrong? Thanks for your patience!

I see. Can you add the Flags through a Block Element - Hook instead? Hook it to generate_after_footer_widgets.

Let us know how it goes.

Hi Fernando, that worked! Thank you so much.