Jump to content

Display Gallery Grid 1 Column on Mobile

Recommended Posts

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!

Link to comment
  • 4 weeks later...

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

Link to comment

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? 

Link to comment
  • 2 months later...

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!

Screenshot 2022-08-11 at 16-04-00 ALIGN Spring 2022 — Bait_Switch.png

Link to comment
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!

Screenshot 2022-08-11 at 16-04-00 ALIGN Spring 2022 — Bait_Switch.png

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;
}
}

 

Email me if you have need any help (free, of course.). Answer within 24 hours. 
Or send to forum message

Contact Customer Care - Learn CSS - Buy me a coffee (thank you!)

Link to comment
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?

image.png.2c98c4bf0f7c332bc986eacc2ee791b6.png

Email me if you have need any help (free, of course.). Answer within 24 hours. 
Or send to forum message

Contact Customer Care - Learn CSS - Buy me a coffee (thank you!)

Link to comment
  • 1 month later...
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;
}
}

 

Email me if you have need any help (free, of course.). Answer within 24 hours. 
Or send to forum message

Contact Customer Care - Learn CSS - Buy me a coffee (thank you!)

Link to comment
  • 1 year later...
  • 3 months later...
Posted (edited)

I am having issues in mobile view with my gallery grid, which is within a section, and the code above isn't working. 

My site is https://gardenia-eagle-gjr9.squarespace.com/config/pages/website-tools/custom-css

password: snifters

It might look like it's working fine, but some of the images get 'moved down,' i.e., they do not show up vertically centered.

Especially the logos. I understand that these are square images in the first place, but could I make them look vertically centered with code without having to crop them? 

Ta in advance

 

This is the code that I am currently using:

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

Edited by anna6
Link to comment

Create an account or sign in to comment

You need to be a member in order to leave a comment

×
×
  • Create New...

Squarespace Webinars

Free online sessions where you’ll learn the basics and refine your Squarespace skills.

Hire a Designer

Stand out online with the help of an experienced designer or developer.