Jump to content

issue with gallery grid in mobile view

Recommended Posts

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

Link to comment
  • 1 month later...
  • Replies 10
  • Views 15.5k
  • Created
  • Last Reply

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.

About Armin:
Squarespace Expert Profile: https://www.squarespace.com/designer/profile/3649084
Website: www.braunsberger-media.com
Leaders Lodge: See my Profile

Link to comment
  • 4 months later...

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;

Link to comment
  • 1 year later...

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!!

Link to comment
  • 10 months later...
  • 1 year later...
  • 1 year later...

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

Screen Shot 2020-08-24 at 10.44.38 PM.png

Link to comment


This topic is now archived and is closed to further replies.

  • 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.