Jump to content
Search In
  • More options...
Find results that contain...
Find results in...
Advanced Search
  • 0

issue with gallery grid in mobile view


Upturning Learning
Go to solution Solved by Fubeman1570048166,

Question

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

Edited by Upturning Learning
Link to post
  • Answers 10
  • Created
  • Last Reply

Top Posters For This Question

Top Posters For This Question

Popular Posts

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 (

Posted Images

10 answers to this question

Recommended Posts

  • 2

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






Edited by Fubeman
Link to post
  • 0

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.

Link to post
  • 0

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

I'm a writer with a thing for web design.

Link to post
  • 0

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

I'm a writer with a thing for web design.

Link to post
  • 0

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

Link to post
  • 0

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 post
  • 0

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?

Link to post
  • 0

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 post

Create an account or sign in to comment

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


×
×
  • Create New...