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

issue with gallery grid in mobile view

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

Share this post


Link to post

9 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

Share this post


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.

Share this post


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.

Share this post


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.

Share this post


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.

Share this post


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

Share this post


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?

Share this post


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