Change Gallery Columns for Mobile Only?

Site URL: http://eddysummers.com.au

I've been working on my site thus far in Desktop mode. I created some galleries whereby the columns are 3 across.
I noted on Mobile when viewing these galleries it's actually displaying then as 2 columns.

I had a tinker about but could not understand or see a way to make a gallery display a certain amount of columns for when viewing on desktop vs viewing on mobile. In my instance Mobile would make more sense to just reduce the columns from 3 across to just one (so that the viewer swipes up or down to pan through the images etc).

I'm guessing to resolve this some coding might be needed?

Hello! Here is a code snippet that will make all galleries 1-column grids on mobile views. Copy and paste this into that page's header code injection (or if you want this to apply to all galleries on your site, you can remove the "<style></style>" tags and paste the CSS in Design > Custom CSS). Note that this is code for Gallery Simple Grids, not Masonry Grids, Gallery Strips or Slideshows.

<style>
/* Make all gallery simple grids 1-column on mobile */
@media(max-width: 769px) {
  .gallery-grid-wrapper {
    grid-template-columns: repeat(1, 1fr) !important;
  }
}
 /* Make all gallery simple grids 1-column on mobile */
</style>

1 hour ago, Caroline_Smith said:

Hello! Here is a code snippet that will make all galleries 1-column grids on mobile views. Copy and paste this into that page's header code injection (or if you want this to apply to all galleries on your site, you can remove the "<style></style>" tags and paste the CSS in Design > Custom CSS). Note that this is code for Gallery Simple Grids, not Masonry Grids, Gallery Strips or Slideshows.

<style>
/* Make all gallery simple grids 1-column on mobile */
@media(max-width: 769px) {
  .gallery-grid-wrapper {
    grid-template-columns: repeat(1, 1fr) !important;
  }
}
 /* Make all gallery simple grids 1-column on mobile */
</style>

 

Thank you Caroline, I shall give that a shot and report back.

On 3/3/2022 at 3:53 PM, Caroline_Smith said:

Hello! Here is a code snippet that will make all galleries 1-column grids on mobile views. Copy and paste this into that page's header code injection (or if you want this to apply to all galleries on your site, you can remove the "<style></style>" tags and paste the CSS in Design > Custom CSS). Note that this is code for Gallery Simple Grids, not Masonry Grids, Gallery Strips or Slideshows.

<style>
/* Make all gallery simple grids 1-column on mobile */
@media(max-width: 769px) {
  .gallery-grid-wrapper {
    grid-template-columns: repeat(1, 1fr) !important;
  }
}
 /* Make all gallery simple grids 1-column on mobile */
</style>

 

Thanks for that. It worked a charm on one of my pages, but for another page that already has an existing header code injection script... i cannot get it to work.

This is the page; https://www.eddysummers.com.au/documentary-weddings

And this is the existing script already in the header code injection;

 

<!-- Image Slider -->
<script>
$(window).on("load", function () {
$(".sqs-gallery-block-stacked").imagesliderblock({
    before_label: 'Mono', // Set a custom before label
after_label: 'Colour' // Set a custom after label
});
});
</script>

<!-- End of Image Slider -->

I tried placing your script above or below it but it was still not taking affect.

Any ideas?

As you can see the script is pretty important as its a slider thing that I need to keep.

Thanks again!

20 hours ago, dunker56 said:

Thanks for that. It worked a charm on one of my pages, but for another page that already has an existing header code injection script... i cannot get it to work.

This is the page; https://www.eddysummers.com.au/documentary-weddings

And this is the existing script already in the header code injection;

 

<!-- Image Slider -->
<script>
$(window).on("load", function () {
$(".sqs-gallery-block-stacked").imagesliderblock({
    before_label: 'Mono', // Set a custom before label
after_label: 'Colour' // Set a custom after label
});
});
</script>

<!-- End of Image Slider -->

I tried placing your script above or below it but it was still not taking affect.

Any ideas?

As you can see the script is pretty important as its a slider thing that I need to keep.

Thanks again!

Try this code for new page

<style>
  @media screen and (max-width:767px) {
	.gallery-masonry-wrapper.gallery-masonry-list--ready {
    height: auto !important;
}
figure.gallery-masonry-item {
    position: relative !important;
    width: 100% !important;
    transform: unset !important;
}
.gallery-masonry-item-wrapper {
    height: auto !important;
}
.gallery-masonry .gallery-masonry-item[data-loaded] img {
    width: 100% !important;
}
.gallery-masonry {
    padding-left: 0 !important;
    padding-right: 0 !important;
}
}
</style>

On 3/16/2022 at 10:21 AM, tuanphan said:

Try this code for new page

<style>
  @media screen and (max-width:767px) {
	.gallery-masonry-wrapper.gallery-masonry-list--ready {
    height: auto !important;
}
figure.gallery-masonry-item {
    position: relative !important;
    width: 100% !important;
    transform: unset !important;
}
.gallery-masonry-item-wrapper {
    height: auto !important;
}
.gallery-masonry .gallery-masonry-item[data-loaded] img {
    width: 100% !important;
}
.gallery-masonry {
    padding-left: 0 !important;
    padding-right: 0 !important;
}
}
</style>

 

Thank you! That worked well except the gallery is now too wide, like it is TIGHT against the screen and when compared to the other galleries that are working it is a bit 'choppy changey'. 

Have a look here (I have applied your changes);

https://www.eddysummers.com.au/documentary-weddings

Is there a way to just have some padding left and right of the image (to align with the slider galleries etc)?

I tried changing the width to 90% but that made it offset. I tried changing the padding values left and right to either 10 or -10 but that seemed to do nothing. Any advice is welcome.

Thanks!

On 3/2/2022 at 11:53 PM, Caroline_Smith said:

Hello! Here is a code snippet that will make all galleries 1-column grids on mobile views. Copy and paste this into that page's header code injection (or if you want this to apply to all galleries on your site, you can remove the "<style></style>" tags and paste the CSS in Design > Custom CSS). Note that this is code for Gallery Simple Grids, not Masonry Grids, Gallery Strips or Slideshows.

<style>
/* Make all gallery simple grids 1-column on mobile */
@media(max-width: 769px) {
  .gallery-grid-wrapper {
    grid-template-columns: repeat(1, 1fr) !important;
  }
}
 /* Make all gallery simple grids 1-column on mobile */
</style>

 

Is this the only solution? Can the grid display three images on mobile? This is on my homepage, so I dont want three images stacked before potential customers get to the "meat" of my homepage. 

Thank you! 

On 3/31/2022 at 8:17 PM, Sarah-Daye said:

Is this the only solution? Can the grid display three images on mobile? This is on my homepage, so I dont want three images stacked before potential customers get to the "meat" of my homepage. 

 

Thank you! 

Can you share link to your home page? We can give code easier

Hi @tuanphan - Just wondering if there is something to help me edit the footer gallery grid display from 2 columns on mobile view, into 3 columns? Link: www.liskprojects.co.nz (the logos in the footer area are what require editing). Any help would be much appreciated 🙂

On 6/29/2022 at 2:31 AM, Greenroom said:

Hi @tuanphan - Just wondering if there is something to help me edit the footer gallery grid display from 2 columns on mobile view, into 3 columns? Link: www.liskprojects.co.nz (the logos in the footer area are what require editing). Any help would be much appreciated 🙂

 

Add to Design > Custom CSS

@media screen and (max-width:640px) {
div#block-yui_3_17_2_1_1654040585494_17023 .slide {
    width: 33.3333% !important;
}
}

thank you!! @tuanphan Really appreciate your help 🙏

Hi @tuanphan

I tried the code and somehow one of the 4 images fell to another row (see attached). Wonder if there's something we can fix it? The website is https://billion-bricks.squarespace.com/ password billion2022

Thanks for your help!

Orapan

On 7/21/2022 at 3:19 PM, orapanh said:

Hi @tuanphan

I tried the code and somehow one of the 4 images fell to another row (see attached). Wonder if there's something we can fix it? The website is https://billion-bricks.squarespace.com/ password billion2022

Thanks for your help!

Orapan

In some cases, you need to add clear attribute

@media screen and (max-width: 640px) {
    div#block-62d8fe252c446050ad35cc7f .slide {
        width:50% !important;
    }
    div#block-62d8fe252c446050ad35cc7f .slide:nth-child(2n+1) {
        clear: left;
    }
}

On 3/16/2022 at 10:21 AM, tuanphan said:

Try this code for new page

<style>
  @media screen and (max-width:767px) {
	.gallery-masonry-wrapper.gallery-masonry-list--ready {
    height: auto !important;
}
figure.gallery-masonry-item {
    position: relative !important;
    width: 100% !important;
    transform: unset !important;
}
.gallery-masonry-item-wrapper {
    height: auto !important;
}
.gallery-masonry .gallery-masonry-item[data-loaded] img {
    width: 100% !important;
}
.gallery-masonry {
    padding-left: 0 !important;
    padding-right: 0 !important;
}
}
</style>

 

Hi @tuanphan!
This has just worked a treat to make my 4 column desktop grid a single column on mobile, but the images on mobile have no space in between (top and bottom) are you able to help?
TIA!

23 hours ago, marieschultz said:

Hi @tuanphan!
This has just worked a treat to make my 4 column desktop grid a single column on mobile, but the images on mobile have no space in between (top and bottom) are you able to help?
TIA!

Change this line

figure.gallery-masonry-item {
    position: relative !important;
    width: 100% !important;
    transform: unset !important;
}

to this

figure.gallery-masonry-item {
    position: relative !important;
    width: 100% !important;
    transform: unset !important;
	margin-bottom: 30px !important;
}

On 3/3/2022 at 3:53 PM, Caroline_Smith said:

Hello! Here is a code snippet that will make all galleries 1-column grids on mobile views. Copy and paste this into that page's header code injection (or if you want this to apply to all galleries on your site, you can remove the "<style></style>" tags and paste the CSS in Design > Custom CSS). Note that this is code for Gallery Simple Grids, not Masonry Grids, Gallery Strips or Slideshows.

<style>
/* Make all gallery simple grids 1-column on mobile */
@media(max-width: 769px) {
  .gallery-grid-wrapper {
    grid-template-columns: repeat(1, 1fr) !important;
  }
}
 /* Make all gallery simple grids 1-column on mobile */
</style>

 

Hey @Caroline_Smith ... is there something similar that would work for a gallery block rather than a gallery section? This is the page I'm working on: https://www.baileyselectrical.com.au/solar

Thank you!

On 4/24/2023 at 10:07 AM, raestanton said:

Hey @Caroline_Smith ... is there something similar that would work for a gallery block rather than a gallery section? This is the page I'm working on: https://www.baileyselectrical.com.au/solar

Thank you!

Where is gallery block?

11 hours ago, tuanphan said:

Where is gallery block?

Ah, sorry, I converted it to 3 images rather than the gallery block since I couldn't get it to work on mobile! Sorry, I forgot I posted here.

On 4/26/2023 at 8:09 AM, raestanton said:

Ah, sorry, I converted it to 3 images rather than the gallery block since I couldn't get it to work on mobile! Sorry, I forgot I posted here.

So did you solve or still need help?

Hi there, 

We are trying to use this code but it is not working for us…does it take some time to process?

I have attached a screenshot of where and how the code is being used, the site is https://www.farmersdaughterinteriors.com/portfolio

Thanks for your help!

On 5/15/2023 at 10:39 PM, Kelseygreen said:

Hi there, 

We are trying to use this code but it is not working for us…does it take some time to process?

I have attached a screenshot of where and how the code is being used, the site is https://www.farmersdaughterinteriors.com/portfolio

Thanks for your help!

This code for Gallery Section, but you are using Gallery Block

You can use this code

<style>
  @media screen and (max-width:767px) {
  div.gallery-block .slide {
    width: 33.333% !important;
    }}
</style>

Hi,

I am working on this gallery with 4 columns,  and 2 rows. But I realized that in mobile, it shows me only 1 column, it's there any way i can show the 4 columns as in desk? 

Thank you,

16 hours ago, JessieG said:

Hi,

I am working on this gallery with 4 columns,  and 2 rows. But I realized that in mobile, it shows me only 1 column, it's there any way i can show the 4 columns as in desk? 

Thank you,

Can you share site url? We can check easier

Hi, 

thank you, i already figure it out.

On 8/9/2023 at 10:42 AM, JessieG said:

Hi, 

thank you, i already figure it out.

Do you mind sharing what you did? I'm trying to do the same thing as you on my site