[Resolved] Aligning Containers In A Grid

[Jodie]

Hi, I want to have a grid with three columns displaying three images side by side in a single line on the footer of my site.

However, there’s large gaps between each container on either side of the image on desktop which I don’t want. I’ve decreased the horizontal gaps in the grid settings to zero, but no luck. Do you know how I can fix this please? Thanks for your help!

[Fernando]

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

[Jodie]

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!

[Fernando]

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

[Jodie]

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!

[Fernando]

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

[Jodie]

Sure, here you are.

[David]

Hi there,

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

[Jodie]

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

[David]

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

[Jodie]

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

[David]

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

[Jodie]

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!

[Fernando]

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.

[Jodie]

Hi Fernando, that worked! Thank you so much.

[Author]

Posts