Jump to content

Change Gallery Columns for Mobile Only?

Recommended Posts

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?

Screenshot 2022-03-03 110636.jpg

Screenshot 2022-03-03 110602.jpg

Link to comment

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>

 

Link to comment
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.

Link to comment
  • 2 weeks later...
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!

Link to comment
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>

 

Email me if you have need any help (free, of course.). Answer within 24 hours. 
Or send to forum message

How to: Setup Password & Share url Insert Custom CSS - Page Header - Upload Custom Font - Upload File - Find Block ID - Contact Customer Care

Link to comment
  • 2 weeks later...
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!

Link to comment
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! 

Link to comment
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

Email me if you have need any help (free, of course.). Answer within 24 hours. 
Or send to forum message

How to: Setup Password & Share url Insert Custom CSS - Page Header - Upload Custom Font - Upload File - Find Block ID - Contact Customer Care

Link to comment
  • 2 months later...
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;
}
}

 

Email me if you have need any help (free, of course.). Answer within 24 hours. 
Or send to forum message

How to: Setup Password & Share url Insert Custom CSS - Page Header - Upload Custom Font - Upload File - Find Block ID - Contact Customer Care

Link to comment
  • 3 weeks later...
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

IMG_3493.PNG

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

 

Email me if you have need any help (free, of course.). Answer within 24 hours. 
Or send to forum message

How to: Setup Password & Share url Insert Custom CSS - Page Header - Upload Custom Font - Upload File - Find Block ID - Contact Customer Care

Link to comment
  • 2 weeks later...
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!

Screenshot 2022-08-04 at 7.16.03 pm.png

Link to comment
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!

Screenshot 2022-08-04 at 7.16.03 pm.png

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

 

Email me if you have need any help (free, of course.). Answer within 24 hours. 
Or send to forum message

How to: Setup Password & Share url Insert Custom CSS - Page Header - Upload Custom Font - Upload File - Find Block ID - Contact Customer Care

Link to comment

Create an account or sign in to comment

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

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