I am trying to replicate the behavior of a collection carousel but I need to navigate to pages and not to collections. When I make a collection of 2 rows of 3 its breaks down to 3 rows of 2 in mobile view. When I try to build the same section out of images (so that they link to pages) the rows of three dont break down at all in mobile view and they just make smaller rows of 3.
If you look on my homepage, you’ll see that in order to get the portals to stack 2 by 2 in mobile view I had to make it 2 by 2 in desktop which looks way too big in desktop mode. I reached out to support but they said custom code would be required. Any help determining this code is appreciated. The site is www.autobongs.com
You don’t need to have 2 sections for this. Put all 6 images in the same section. By default, they are not wrapped on desktop. You need to change this. Custom css:
.layout-panel-flex {
display: flex;
flex-wrap: wrap !important;
}
Make sure the section itself has direction settings like this:
Then adjust each image’s size and padding:
On desktop they are 30% (3 per row), on mobile they are 45% (2 per row).
1 Like
Thank you this worked beautifully. Im encountering an issue when I try to add 3 more categories. When the new third row breaks down into mobile view it stacks two correctly but then the 3rd is beneath them and looks huge. Is there a way to get the third one to match the size of the others and orient itself in the middle when it switches to mobile? Basically just like it is now but with the portal matching the size of the others?
1 Like
In the case of one left over (odd number), it’s best to put that one image into a second section. Just duplicate your section, remove all but one image, then change the image upload to the one you want. The key is to make this section “vertical on mobile”:
There arent actually sections of two its 1 section of 6 and that breaks down into 3 stacks of 2 in mobile. So in adding another 3 images it will be 3 rows of 3 on desktop that then need to break into 4 rows of 2 with the remaining one beneath that. Would I still use the same strategy to accomplish that?
Yes, since it’s an odd number, 3x3 on desktop, 2x4 +1 on mobile, that extra image needs to be configured as “vertical on mobile”, the only way to do that is to put it in its own section. It doesn’t take long to do this and test it. It’s hard to do an odd number when you’re working with 2 viewpoints (desktop/mobile) in a way that looks great on both. My suggestion would be 4 per row on desktop, 2 on mobile. This is a pretty good standard to go by, and set up how many you want based on this (4,8,12,16). This is why I’d either put the last one in a different section or just go with a number that is good for both.
1 Like