Display Gallery Grid 1 Column on Mobile

Site URL: https://www.theochandler.com/selectedwork

Hello!

I have seen this question asked in multiple places on the forum, but for some reason none of the solutions offered have worked for me. I have a video gallery grid block that I want to display with two columns on desktop and one column on mobile. Currently it displays as 2 columns on any screen.

I am using squarespace 7.0. I have tried pasting CSS code that has been suggested previously with no luck. I'm wondering if my case is different for some reason. Here is a link to the page with the gallery.

https://www.theochandler.com/selectedwork

Thank you for any suggestions!

Hi,

Add to Design > Custom CSS

@media screen and (max-width:640px) {
div#block-yui_3_17_2_1_1651870849247_14844 .slide {
    width: 100% !important;
}
}

Thank you so much! It worked perfectly!

I am having the same issue but with images. I have grid galleries with three images  in a row on desktop which I want to stack in single columns on mobile. I've tried some of the code suggested in this forum and elsewhere but nothing seems to work. I need something that works universally and doesn't require targeting ids for each gallery.

This page should illustrate what I mean
https://www.incidentallysydney.com/blog/barrenjoey-lighthouse-palm-beach 

Any suggestions would be appreciated! 

Thank you

In case anyone else is having the same issue, I've found a solution to my issue described above.

This free Ghost Plugin - 1 Image Per Row On Mobile,  outlines code for both 7.0 and 7.1. 

I inadvertently copied both and my problem was solved. I am using 7.1 but when I went back and took out the 7.0 code, my issue returned.  So I've left both in my CSS. It doesn't make any sense to me but may to someone else? 

Hi all! I'm stumped -- please help! I tweaked the CSS to make all gallery blocks render 3 images across on mobile a few months ago, and I swear it worked. Now I'm checking it out and it appears to have broken. I tried the above fixes, but they're not working. Any suggestions would be greatly appreciated!

Here is the relevant page (the gallery blocks at the bottom):

https://www.baitswit.ch/vol-3-no-2

Thank you so much!

On 8/12/2022 at 3:05 AM, lu_rhubarb said:

Hi all! I'm stumped -- please help! I tweaked the CSS to make all gallery blocks render 3 images across on mobile a few months ago, and I swear it worked. Now I'm checking it out and it appears to have broken. I tried the above fixes, but they're not working. Any suggestions would be greatly appreciated!

Here is the relevant page (the gallery blocks at the bottom):

https://www.baitswit.ch/vol-3-no-2

Thank you so much!

To make 1 item/row on mobile, use this CSS

@media screen and (max-width:640px) {
div#block-yui_3_17_2_1_1651683279428_35955 .slide {
    width: 100% !important;
}
div#block-yui_3_17_2_1_1651683279428_35955 img {
    width: 100% !important;
    left: 0 !important;
    height: auto !important;
    top: 0 !important;
}
}

@tuanphan Thank you, but I'm actually trying to render 3 items per row on mobile! I tried changing the width to 3.3333%, but that doesn't seem to do it. Any other thoughts?

On 8/13/2022 at 11:58 PM, lu_rhubarb said:

@tuanphan Thank you, but I'm actually trying to render 3 items per row on mobile! I tried changing the width to 3.3333%, but that doesn't seem to do it. Any other thoughts?

Hi. For this section? or all blocks?

@tuanphan I would love to have it work for all gallery blocks! Is that possible?

On 8/19/2022 at 5:42 PM, lu_rhubarb said:

@tuanphan I would love to have it work for all gallery blocks! Is that possible?

Hey does anyone know if it's possible yet to get this to work for all gallery blocks without targeting specific blocks?

On 9/30/2022 at 9:09 PM, JustDoNick said:

Hey does anyone know if it's possible yet to get this to work for all gallery blocks without targeting specific blocks?

Try this code, if it doesn't work, please share link to page where you use some galleries

@media screen and (max-width:640px) {
	.gallery-block .slide {
		width: 100% !important;
}
}

I want to make my all album image to 1 column in mobile view.  how can I do?

my website: https://willfilmsstudio.com/work

16 hours ago, will__lai said:

I want to make my all album image to 1 column in mobile view.  how can I do?

my website: https://willfilmsstudio.com/work

I see you figured it out? It already show 1 column on mobile view