Gallery Slideshow Image Size on Mobile

Site URL: https://gazelle-vibraphone-798g.squarespace.com

I am having trouble setting the correct code to fix the mobile image sizing, margins/padding of a gallery slideshow on my home page in Squarespace 7.1. On mobile these images are getting cropped. I want the full image displayed. I have read through several posts on this and have tried using the following code inside Design>Custom CSS with no success.

@media screen and (max-width:767px) {
body#collection-625721445aa78c2d0936faf0 {
.gallery-slideshow-item img {
    width: 120% !important;
    left: 50% !important;
    transform: translateX(-50%);
}
    .gallery-slideshow-item-src {
    overflow: visible;
}}
}

Here is home page...

URL:  gazelle-vibraphone-798g.squarespace.com
pw: ohboyohboy

Gallery
Slideshow: Full
Width: Full
Autoplay: On
Animation: Scale Down

Thanks in advance,

-Rob

1 hour ago, riddle129 said:

Site URL: https://gazelle-vibraphone-798g.squarespace.com

I am having trouble setting the correct code to fix the mobile image sizing, margins/padding of a gallery slideshow on my home page in Squarespace 7.1. On mobile these images are getting cropped. I want the full image displayed. I have read through several posts on this and have tried using the following code inside Design>Custom CSS with no success.

@media screen and (max-width:767px) {
body#collection-625721445aa78c2d0936faf0 {
.gallery-slideshow-item img {
    width: 120% !important;
    left: 50% !important;
    transform: translateX(-50%);
}
    .gallery-slideshow-item-src {
    overflow: visible;
}}
}

Here is home page...

URL:  gazelle-vibraphone-798g.squarespace.com
pw: ohboyohboy

Gallery
Slideshow: Full
Width: Full
Autoplay: On
Animation: Scale Down

Thanks in advance,

-Rob

Try

@media only screen and (max-width: 767px) {
  section[data-section-id="625989ca8596b1055dbd3490"] img {
    height: auto !important;
  }

  section[data-section-id="625989ca8596b1055dbd3490"] .gallery-fullscreen-slideshow-list {
    height: 100% !important;
  }
  section[data-section-id="625989ca8596b1055dbd3490"] .gallery-fullscreen-slideshow {
    height: 30vh !important;
  }
}

Let me know how it works on your site

My testing

20 minutes ago, bangank36 said:

Try

@media only screen and (max-width: 767px) {
  section[data-section-id="625989ca8596b1055dbd3490"] img {
    height: auto !important;
  }

  section[data-section-id="625989ca8596b1055dbd3490"] .gallery-fullscreen-slideshow-list {
    height: 100% !important;
  }
  section[data-section-id="625989ca8596b1055dbd3490"] .gallery-fullscreen-slideshow {
    height: 30vh !important;
  }
}

Let me know how it works on your site

This was perfect. I had been trying using the collection ID, not the section ID you included in the code. Thank you!

You can use the following extension: https://chrome.google.com/webstore/detail/squarespace-id-finder/igjamfnifnkmecjidfbdipieoaeghcff?hl=en to get the right id

Follow up question.

Your code for the galley slideshow on my homepage has been scaling correctly on mobil devices. Unfortunately, when viewing on desktop with a narrowed browser window the image stops scaling and crops.  I hope you can help again.

17 hours ago, riddle129 said:

Follow up question.

 

Your code for the galley slideshow on my homepage has been scaling correctly on mobil devices. Unfortunately, when viewing on desktop with a narrowed browser window the image stops scaling and crops.  I hope you can help again.

It looks fine on my Laptop/Mobile

With tablet, it appear problem, you can use this code for tablet

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

8 hours ago, tuanphan said:

It looks fine on my Laptop/Mobile

With tablet, it appear problem, you can use this code for tablet

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

 

@tuanphan Thank you. I replaced the previous Custom CSS with your code and it appears to be publishing correctly on different desktop browsers and on mobile. I will check tablet shortly.

Hi. I'm also trying to adjust the height of the slideshow gallery to fit the full height on both mobile and portrait tablet. I've tried everything I can find on here but nothing seems to work. Can anyone help please? Thanks in advance.

https://www.nikkirees.com/

On 10/2/2023 at 5:57 PM, MakingWaves said:

Hi. I'm also trying to adjust the height of the slideshow gallery to fit the full height on both mobile and portrait tablet. I've tried everything I can find on here but nothing seems to work. Can anyone help please? Thanks in advance.

https://www.nikkirees.com/

You mean remove this white space to make gallery fullheight?

Hey Tuan. Yes, although it's not really a problem on mobile now I've made some changes, it's the desktop display that looks odd now.

I've coded the captions to display over the gallery images but a redundant gap now sits below where the captions would normally feature. Any help would be really appreciated, thanks.

Try this CSS code

.gallery-fullscreen-slideshow {
    margin-bottom: 20px !important;
}

2 hours ago, tuanphan said:

Try this CSS code

.gallery-fullscreen-slideshow {
    margin-bottom: 20px !important;
}

 

Perfect, thanks Tuan 🙂