Archived topic
4-across logo grid needs to scale to 2-across in mobile view
7 replies · Started by MICHAEL on December 27, 2021
Hi. If you look in desktop view at https://whatcommilliontrees.org/million-trees-partners/ (scroll down to the Other Partners section), you'll see a GB container with a grid inside that holds four containers each with four logos across. Looks fine in desktop view. On mobile devices, though, the logos stack into in a single column (too big). In mobile view, I want there to be two columns side-by-side.
I read the earlier tech response David gave on April 1, 2020 for a similar question, where he advised:
"Select the individual Grid Container. In the Right Hand Settings sidebar where you can set the Container Width % – select the Mobile Tab above and then change the width to 25% or whatever you need. Repeat that for each item."
I tried that and it doesn't work. I am guessing it is something abou how I set up he container and grid. If I start fresh and add a new container, what would be the proper way to create the inside logos? Thanks.
Hi Michael,
Can you first try adding all (potential) 8 logos under one grid wrapper/block?
https://www.screencast.com/t/yPh7WRUv
Currently, you are using 2 grid wrappers - each for 4 logos - and that's not necessary.
Let me know :)
So, to make sure I understand... the correct GB structure for this would be:
container block
grid block (4-across in desktop view)
image blocks? (as many as needed)
Or should there be another container surrounding each image in case padding needs to be adjusted individually on some logos?
Thanks.
Hi there,
I believe what Leo meant was to set up a Grid Block with 8 Container column blocks in it.
You then set the width of each of these Container column blocks to 25% for desktop (for 4 column layout) and then set it to 50% for mobile(2 column layout).
You can set different column width on the sidebar settings panel. You should see tabs labeled Desktop | Tablet | Mobile w/ has its own separate settings. :D
Okay, so if I am understanding correctly, there is the overall Container for the section, then a Grid block in that per four logos. Within the Grid block is four inner Containers which will each hold an image block for the logo. Correct?
I understand the part you mentioned about the percentage settings for different devices. Just not sure if 4 inner containers should be part of the Grid block structure or not. Thanks.
Here's how it would look like:
https://share.getcloudapp.com/9ZuD2PZd
There's no limit to how many Container Blocks can a Grid block hold. :D
Okay, thanks, I'll use that (simpler) structure. I had no idea that the Grid block was not needed for this layout!
No problem. :D
