Hey there - similar question here. I've created a directory for a client with a row of image blocks that each link to a pre-filtered list for each category. In mobile view the auto stacking single wide isn't great. 2 rows of 3 would be great. code ideas?

Site URL: https://cuboid-sailfish-6hlk.squarespace.com/osborne-village-directory

site password OVBIZ

hi @MoiToi

Use a gallery block (grid) instead of image blocks. Gallery blocks display images in two columns on mobile devices. If you want the Gallery block to display 3 columns on mobile then add this to Custom CSS.

@media screen and (max-width: 767px){
	.sqs-layout .sqs-gallery-design-grid-slide {
    	width: 33.3% !important;
	}
}

1 hour ago, meganheath said:

hi @MoiToi

Use a gallery block (grid) instead of image blocks. Gallery blocks display images in two columns on mobile devices. If you want the Gallery block to display 3 columns on mobile then add this to Custom CSS.

@media screen and (max-width: 767px){
	.sqs-layout .sqs-gallery-design-grid-slide {
    	width: 33.3% !important;
	}
}

 

I didn't realize that images in a gallery could link - so I've set that up. I added the code to the Custom CSS within the design panel, but it had no impact on the mobile view. Is there somewhere else I should be pasting it?

4 minutes ago, MoiToi said:

I didn't realize that images in a gallery could link - so I've set that up. I added the code to the Custom CSS within the design panel, but it had no impact on the mobile view. Is there somewhere else I should be pasting it?

 

Looks like you've added a gallery section. This code works for a gallery block only.

Add a blank section and then add a gallery block to the section. You can add url's to gallery block images too.

9 minutes ago, meganheath said:

Looks like you've added a gallery section. This code works for a gallery block only.

Add a blank section and then add a gallery block to the section. You can add url's to gallery block images too.

Hmmm - I see. Unfortunately when I add a block, there aren't any options for a "Gallery". Is it called something else? Summary? Accordian? (as I'm not familiar with either of those). I really appreciate this. Thank you.

14 minutes ago, MoiToi said:

Hmmm - I see. Unfortunately when I add a block, there aren't any options for a "Gallery". Is it called something else? Summary? Accordian? (as I'm not familiar with either of those). I really appreciate this. Thank you.

 

Hmm, that's strange. The Gallery block option should be underneath the image block.

Not a problem. Change your Gallery Section layout to "Grid:Simple". And then add this code from this previous thread to Custom CSS.

@media screen and (max-width:640px) {
.gallery-grid--layout-grid .gallery-grid-wrapper {
    grid-template-columns: repeat(3,auto) !important;
}
}

Hopefully that's done the trick 🙂

6 hours ago, meganheath said:

Hmm, that's strange. The Gallery block option should be underneath the image block.

Not a problem. Change your Gallery Section layout to "Grid:Simple". And then add this code from this previous thread to Custom CSS.

@media screen and (max-width:640px) {
.gallery-grid--layout-grid .gallery-grid-wrapper {
    grid-template-columns: repeat(3,auto) !important;
}
}

Hopefully that's done the trick 🙂

Perfect! Thank you!!

Hi, could I ask how you set up your directory?