issue with gallery grid in mobile view

Hi there,

Is there a way to control the number of images per row in mobile view of a gallery grid block, using the marquee template?

On desktop and tablet view I have asked it to be 3 images per row (and it does), but it changes to 2 images per row in mobile.

I have resized images to smaller sizes with no luck. The layout/order of the images is vital, as together they form a complete picture.

I know I could disable the mobile view so that the desktop view is shown on mobile devices, but then I loose the awesome parallax scrolling etc.

our site is here:

Thanks for your help... we love SquareSpace

Hy - a strongly requested issue. seems like there is no built-in solution yet

I just wrote down a solution for another questionhttp://answers.squarespace.com/questions/101929/gallery-grid-on-mobile-devices-2-instead-of-1-thumbnail-per-row

so you can create a "mobile version" of a page with a little css.

After many searches, I found no available answers. So, I went and carefully inspected the site until I found the id where mobile assigns the columns for my gallery block (grid). This is how I made my adjustments. Just change the width from 50% (what mobile is originally) to 100%. This is for the Horizon template using a Gallery Grid block:

@media only screen and (max-width: 640px)
{.sqs-gallery-design-grid-slide {
   width: 100% !important;
   clear: none !important;
}
}

@fubeman Thanks a lot for this fix! This worked for Bedford beautifully, except I needed to shrink the sizes of the images in the grid, so decreased the width percentage.

@fubeman Thanks a lot for this fix! This worked for Bedford beautifully, except I needed to shrink the sizes of the images in the grid, so decreased the width percentage.

@maxsheridan Please make sure that you are only adding answers to posts when you have an answer to provide. Otherwise, you will want to add your response as a comment. I've automatically converted this for you.

I am having the same issue and when I put this code in it seems to fix the problem perfectly when I preview the site in mobile view!

But for some reason it's not letting me save the code. When I try and leave the Custom CSS page it says "Failed to save. Please try again." in red down at the bottom. I'm not very knowledgeable about code - do I need to add something to what's above to get it to work??

Thanks for your help!!

Hello,

I have to suggest you these peoples becuase they help me too.so please you can tryout this link :

and comment there so they help you

thank you for this code! Worked nicely for me. I notice when I flip the phone to landscape that it goes back to 2 columns rather than 1. Is there a way to fix that within the same CSS?

After hours of going crazy, you fixed my problem instantly! THANK YOU.

The code provided by Fubeman1570048166 didn't work for my site.

Instead I used chrome's inspect tool to find the full Simple Gallery stylings and came up with this:

@media screen and (max-width:730px) {
.gallery-grid-wrapper {
   grid-template-columns: repeat(3, 33%) !important; 
  grid-column-gap: 1.5vw; 
      grid-row-gap: 1vw; 
  padding: 0vw 1.5vw; 
  width: 95% !important;
}
}

// The most important parts of this code are the 3rd and 7th lines.

In the third line you describe how many columns you want in the gallery block. The first number tells the site how many columns and the percentage tells the site by what proportions to split the screen per item. Since I want three columns in my gallery block, I need each column to take up about 33% of the screen so the total percentage equals 100% (or close enough to it ). I'm not an expert on this so you can read more about the original "fr" unit and how it relates to percentages here: https://css-tricks.com/introduction-fr-css-unit/

The last line tells the site how wide to make the gallery block itself.

Play around with the code until you get the effect you need and good luck! Site: makeroomnow.org