How to make a different gallery size on mobile and desktop view

I would like to have a different gallery size on my homepage both on desktop and on mobile. Right now the gallery pictures on the homepage look great with gallery height size L on desktop view but when I go to mobile view it looks too big. And I can't change the size on mobile view without it being changed the same way when it's on desktop view. Does anyone know a way around this? Thanks!

Hi,

We can use some lines of CSS to resize it on mobile. If you share site url, we can check easier

Similar issue although I am able to adjust images on mobile to look good but it's the in between, Tablet and iPad look awful or smaller desktop displays, everything looks horrible.  What is the fix for this?  It seems Squarespace autoscaling is causing the problem and I just want certain images to stay the same aspect ratio,

15 hours ago, KurtChicago said:

Similar issue although I am able to adjust images on mobile to look good but it's the in between, Tablet and iPad look awful or smaller desktop displays, everything looks horrible.  What is the fix for this?  It seems Squarespace autoscaling is causing the problem and I just want certain images to stay the same aspect ratio,

If you share link to page where you have problem, we can check easier

On 12/28/2023 at 10:55 PM, tuanphan said:

Hi,

We can use some lines of CSS to resize it on mobile. If you share site url, we can check easier

Sorry for the late reply. The website is https://www.mersihagadzo.com/. I would like the desktop gallery image size to stay the same just the mobile size i'd like smaller. Thanks!

Emina

On 1/9/2024 at 4:45 AM, gadzoe said:

Sorry for the late reply. The website is https://www.mersihagadzo.com/. I would like the desktop gallery image size to stay the same just the mobile size i'd like smaller. Thanks!

Emina

You can use this code to Website Tools (under Not Linked) > Custom CSS

@media screen and (max-width:767px) {
.gallery-fullscreen-slideshow {
    height: 30vh !important;
}
}

On 1/9/2024 at 9:29 PM, tuanphan said:

You can use this code to Website Tools (under Not Linked) > Custom CSS

@media screen and (max-width:767px) {
.gallery-fullscreen-slideshow {
    height: 30vh !important;
}
}

 

Ok, it works. I was just wondering is it possible to make the images a little bigger though on mobile? The images are not cut off which is good but I would like it to look more like a full page image on mobile with caption underneath.

On 1/15/2024 at 10:32 PM, tuanphan said:

You can adjust 30 to another number

Thank you! It's exactly the way I want it now.

I'm having the same issue on my site. I've tried the custom CSS and it's not working for some reason.
Any help is much appreciated.

12 hours ago, kerrvernon said:

I'm having the same issue on my site. I've tried the custom CSS and it's not working for some reason.
Any help is much appreciated.

 

You can use this CSS code

@media screen and (max-width:991px) {
body.homepage .gallery-fullscreen-slideshow {
    height: 30vh !important;
}
}

Thanks but that's not made any difference to mobile view.

16 hours ago, kerrvernon said:

Thanks but that's not made any difference to mobile view.

Can you add the code? I can check easier

Hello! I have same issue, but unfortunately none of CSS works. I would like to keep my gallery slideshow full screen on desktop, but on mobile the vertical full screen aspect ratio doesn't work for my images.

Website: https://piano-sheep-9pcl.squarespace.com/ker-and-downey 

pw: newafs123

Would appreciate the help!

On 3/28/2024 at 3:06 PM, basianiez said:

Hello! I have same issue, but unfortunately none of CSS works. I would like to keep my gallery slideshow full screen on desktop, but on mobile the vertical full screen aspect ratio doesn't work for my images.

Website: https://piano-sheep-9pcl.squarespace.com/ker-and-downey 

pw: newafs123

Would appreciate the help!

 

You can use this code to Website > Website Tools > Custom CSS

@media screen and (max-width:767px) {
.user-items-list-item-container[data-section-id="65f3214000ba3f226fcc3d24"] ul {
    min-height: unset !important;
}
}

thank you 🙏🏼

Hello!
I am having a similar issue, I have a gallery slideshow that looks perfect on a desktop, but on mobile the images are too large and cut off. I'd like the images on mobile to be small and fit the screen better. Do you know a code for this?
Here is the site: www.pupandmephoto.com/pricing

10 hours ago, pupandme said:

Hello!
I am having a similar issue, I have a gallery slideshow that looks perfect on a desktop, but on mobile the images are too large and cut off. I'd like the images on mobile to be small and fit the screen better. Do you know a code for this?
Here is the site: www.pupandmephoto.com/pricing

You can use this code to Website > Website Tools > Custom CSS

@media screen and (max-width:767px) {
.gallery-fullscreen-slideshow {
    height: 35vh !important;
}
}

Hi there, I'm having the same issue, I have a gallery on masonry but it looks way too samell on the phone. I've tried inputting the css code you gave a few times, but the code doesn;t seam to do anything. Nothing changes. Can you please help. Thanks!!

https://www.anasabinadys.com/projects/project-one-f5w4d-w94pg

I have this same issue! Background image on my home screen looks amazing in desktop view, but when I switch to mobile view it looks horrible.

On 5/14/2024 at 4:53 AM, Anasabina said:

Hi there, I'm having the same issue, I have a gallery on masonry but it looks way too samell on the phone. I've tried inputting the css code you gave a few times, but the code doesn;t seam to do anything. Nothing changes. Can you please help. Thanks!!

 

https://www.anasabinadys.com/projects/project-one-f5w4d-w94pg

Use new code

@media screen and (max-width: 767px) {
    body:not(.homepage) .gallery-masonry-item-wrapper {
        height:auto !important;
        margin-bottom: 30px !important
    }

    body:not(.homepage) figure.gallery-masonry-item {
        position: relative !important;
        width: 100% !important;
        transform: unset !important
    }

    body:not(.homepage) .gallery-masonry-item-wrapper {
        height: auto !important
    }

    body:not(.homepage) .gallery-masonry .gallery-masonry-item[data-loaded] img {
        width: 100% !important
    }

    body:not(.homepage) .gallery-masonry {
        padding-left: 10 !important;
        padding-right: 10 !important
    }

    body:not(.homepage) .gallery-masonry-wrapper.gallery-masonry-list--ready {
        height: auto !important
    }
}

19 hours ago, harmonixband said:

I have this same issue! Background image on my home screen looks amazing in desktop view, but when I switch to mobile view it looks horrible.

What is page url?

Hi!
I have the opposite issue whereby by mobile view is perfect, but i want the desktop view gallery to be smaller.

https://www.polivantage.com/583544494043

11 hours ago, Polivantage said:

Hi!
I have the opposite issue whereby by mobile view is perfect, but i want the desktop view gallery to be smaller.

https://www.polivantage.com/583544494043

Try this to Website Tools > Custom CSS

@media screen and (min-width:768px) {
body#collection-6654c7df503f41361bd52d08 .gallery-slideshow {
    height: 60vh !important;
}
}

I'm having the same problem where the images are great on web but too large and cut off on mobile and none of these codes work for it. the site link is kylesaunders.net 

edit - I fixed it by finding the title of the gallery type in the html

On 6/1/2024 at 2:24 PM, kylesaunders said:

I'm having the same problem where the images are great on web but too large and cut off on mobile and none of these codes work for it. the site link is kylesaunders.net 

 

edit - I fixed it by finding the title of the gallery type in the html

Aha! yes thank you! for the "Reel" the title was

.gallery-reel