Jump to content

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

Go to solution Solved by tuanphan,

Recommended Posts

Posted

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!

Posted

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,

Posted
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

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

Contact Customer Care - Learn CSS - Buy me a coffee (thank you!)

  • 2 weeks later...
Posted
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

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

 

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

Contact Customer Care - Learn CSS - Buy me a coffee (thank you!)

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

  • Solution
Posted
11 hours ago, gadzoe said:

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.

You can adjust 30 to another number

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

Contact Customer Care - Learn CSS - Buy me a coffee (thank you!)

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

  • 1 month later...
Posted
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;
}
}

 

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

Contact Customer Care - Learn CSS - Buy me a coffee (thank you!)

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

 

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

Contact Customer Care - Learn CSS - Buy me a coffee (thank you!)

  • 4 weeks later...
Posted

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

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

 

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

Contact Customer Care - Learn CSS - Buy me a coffee (thank you!)

  • 2 weeks later...
Posted
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?

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

Contact Customer Care - Learn CSS - Buy me a coffee (thank you!)

  • 2 weeks later...
Posted
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;
}
}

 

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

Contact Customer Care - Learn CSS - Buy me a coffee (thank you!)

Posted (edited)

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

Edited by kylesaunders
  • 1 month later...
Posted
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

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.