- This topic has 15 replies, 3 voices, and was last updated 3 years, 3 months ago by
.
-
Posts
-
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!
Customer Support
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.
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.
Customer Support
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-rowHi 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:10pxSpacing – Left & Right Margin set to:
auto
this will center the containerSizing – 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:70pxHi 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.
- You must be logged in to reply to this topic.
