Jump to content

Gallery Slideshow Image Size on Mobile

Recommended Posts

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

squarespace-Screenshot.png

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

squarespace-Screenshot.png

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

Greeting, it's BeyondSpace, I am Squarespace dev focus on provide solutions to enhance feature that squarespace.com can't provide.
Feel free to check my current Squarespace Plugins Developement: Enable Pinch/Zoom on lightbox, Delivery Date Picker, Youtube Gallery for Squarespace
If you find my answer fit your need, let's leave a like or upvote so others with the same issue can find their solution. Thank you

Link to comment

My testing

image.png.0b6782804cc9224eeb1b7524c635e9f0.png

Greeting, it's BeyondSpace, I am Squarespace dev focus on provide solutions to enhance feature that squarespace.com can't provide.
Feel free to check my current Squarespace Plugins Developement: Enable Pinch/Zoom on lightbox, Delivery Date Picker, Youtube Gallery for Squarespace
If you find my answer fit your need, let's leave a like or upvote so others with the same issue can find their solution. Thank you

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

Link to comment

Greeting, it's BeyondSpace, I am Squarespace dev focus on provide solutions to enhance feature that squarespace.com can't provide.
Feel free to check my current Squarespace Plugins Developement: Enable Pinch/Zoom on lightbox, Delivery Date Picker, Youtube Gallery for Squarespace
If you find my answer fit your need, let's leave a like or upvote so others with the same issue can find their solution. Thank you

Link to comment
  • 1 month later...

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.

gallery.png

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

gallery.png

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

 

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

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.