Jump to content

Create more than 2 columns in mobile for grid gallery

Recommended Posts

My website is lexy.co.nz

My homepage images are placed in a grid style gallery with 6 rows. When I view them on a mobile, it only shows 2 rows.

I was wondering if there was a way to [in mobile] view more than 3 rows? The image files are 500 x 500px already and I've tried to see what would happen if the files were 100 x 100px but it didn't work. I'm not sure how big the mobile screen is and maybe I could make the image size the [mobile width] divided by [how many columns I want]?

Much help appreciated!

Link to comment
  • 2 months later...
  • Replies 7
  • Views 11.4k
  • Created
  • Last Reply

If you wanted to have rows of 3 images on mobile displays, you could add the following code to your CSS Editor:


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

33.33% is roughly a third of the total width of the area your Grid Gallery Block lives in. This makes each image take up a third of the width.

If you need more than three rows you would have to make that percentage an equal percentage of the total width of the page area for the number you are going for, (such as 25% for 4 columns etc.) in order to force the images to size that way.

If you need this only for one page or specific pages, place it between style tags in the page's header code injection:


<style>
@media only screen and (max-width: 640px) {
.sqs-gallery-design-grid-slide { 
   width: 33.33% !important;
  }
}
</style>

I hope that helps!

Link to comment
  • 5 months later...
  • 5 months later...

@korbendallas23 I'm not too sure what the setup is from the screenshot, but you might try adding this rule in addition to the one above:


.sqs-gallery-block-grid {
 overflow: visible
}

In the context of the code I posted originally, it would be placed within the @media query so all the code would end up looking like this:


@media only screen and (max-width: 640px) {
  .sqs-gallery-design-autogrid-slide {
     width: 33.3% !important;
     clear:right !important;
    }
  .sqs-gallery-block-grid {
      overflow: visible
    }
}

If that's not working, you might post a link to your site.

Link to comment
  • 1 year later...

Archived

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

Guest
This topic is now 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.