Create more than 2 columns in mobile for grid gallery

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!

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!

Try this for Summary Blocks:

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

This does create the images in 3 rows, but it cuts off the images and puts them overlapping left to right. Please let me know if there there is a way to fix it. I am using it for social media and you can see how they're cut off in the image I attached.

Greg

Thank you @TreyT! Worked a treat.

Thank you @TreyT! Worked a treat.

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

needed to be 33.6% for me