Jump to content

squarespace 7.1 gallery overlay image-max size

Recommended Posts

Is there a way to limit the size your image shows on an overlay? This is for Squarespace 7.1. When I click on a thumbnail in the gallery block, my image is shown at a huge size. I want to limit the size at which the image is shown when clicked.

Any help would be appreciated. Thank you!

Link to comment
  • Replies 5
  • Views 488
  • Created
  • Last Reply

Top Posters In This Topic

On 3/28/2023 at 5:57 AM, Skylab said:

Hey. Try this:

https://radish-sepia-nf6k.squarespace.com/sketches

Pass: Diamond

If you scroll down to the 2 images in the gallery, you'll see what I mean when you click on any of the images. They blow up to take up the whole overlay screen. I wanted to have them show up at a certain size. I just need to know what the code would look like so I can adjust the sizes as needed.

Thank you!

Add this code to Design > Custom CSS

/* Gallery Lightbox Image */
.sqs-gallery-design-stacked-slide img {
    max-width: 60%;
    max-height: 60% !important;
    left: 50% !important;
    top: 50% !important;
    transform: translate(-50%,-50%) !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!)

Link to comment

Ok, so I tried your code. It disproportionately resizes some of my images when they are clicked. If one of my images are wider or taller, this code squeezes the image. Your code below will work if every aspect ratio of the image in the gallery is the same. But if one of my images is tall it squishes it.

 max-width: 60%;
    max-height: 60% !important;

Is there a way to tweak this code to automatically resize the images proportionately based on the aspect ratio of the image?

Like, resize the image no larger than 80% of what it is, but still keep the same aspect ratio? So if one of my images is wide it will just resize it smaller but still keep it wide.

Thank you for your help.

squarespace overlay gallery image shrink.jpg

squarespace overlay gallery image shrink2.jpg

Edited by Skylab
added a new image
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.