Archived topic
Mobile Spacing Between Grid and Column Elements Being Ignored
7 replies · Started by Edward on April 12, 2022
Greetings. I'm using a 3-wide grid element within a container on desktop (I also tried a 3-wide column element). Each of the 3 grid elements from top to bottom has: spacer, image, paragraph, button, spacer. I've also added bottom margin to the 3 buttons just in case.
On mobile (chrome, firefox), the button from grid element 1 touches the image of element 2, etc.
How do I get the responsive behavior to respect the vertical spacing required? White space between the 3 elements.
Much appreciated.
Hi there,
if you select the Grid Block, in the sidebar settings you will see a Vertical Gap option:
https://docs.generateblocks.com/article/grid-overview/#vertical-gap
On the "Grid" element itself, I already have the vertical gap set to 100.
On the containers within the grid, I have "Remove Vertical Gap" off.
Much appreciated.
If you select the Grid, and switch to Mobile Preview and then change the Vertical Gap settings, do you see the change in the editor ?
Yes, the mobile preview tool seems to conform to the actual settings, so I'm seeing the impact of the "vertical gap" plus the spacers.
However, on both mobile Chrome and Firefox, all of that is ignored. I'm also seeing left margin and padding ignored on some elements so text starts on the left bezel of the phone.
Can you go to Dashboard > GenerateBlocks > Settings and click the Regenerate CSS button
That fixed it. Thank you!
Glad to hear that!
