Jump to content

How to reduce an image lightbox size size from full sreen.

Recommended Posts

  • Replies 8
  • Views 3.2k
  • Created
  • Last Reply
On 1/13/2020 at 11:44 PM, JRJones said:

No I have not they sill display full screen in a Lightbox

I found a solution, but I am not sure if it works for you:

Try adding this into custom CSS (the 15% values determines size; ie 5% is bigger image, 25% is smaller)

.yui3-lightbox2 .sqs-lightbox-slideshow .sqs-lightbox-padder {
    position: absolute;
    text-align: left;
    top: 15%;
    left: 2%;
    bottom: 15%;
    right: 2%;

I visited your site and noticed that your images arent centered when in Lightbox; maybe you have to add this as well into custom css:

.yui3-lightbox2 .sqs-lightbox-slideshow {
    left: 600px;
    top: 0px;
    width: 1500px;
    height: inherit;
    position: relative;
    font-size: 0px;

I am not a programmer, but I used the Chrome "Inspect" function to play around..

Hope this helps!

Currently using the Avenue Template.

Link to comment

Thanks p2molvaer. I started digging into the CCS myself via inspector and managed to change a few features of my lightbox to display the images as I want. Im happy with how everything is looking with the exception to the lightbox light background opacity. I am able to change the current opacity from 0.98 to 1 and see the results through the inspector but when I try to inject the changes to the CCS in the custom injector the opacity reverts back to 0.98. It has somthing to do with the z-index. I have tried several different CCS code injections but cant crack this one yet. I just want the lightbox background to be full white with no opacity so you cant see through to the gallery image block behind the lightbox.

Link to comment
  • 6 months later...


Was looking at your site (nice) and I see you have Lightbox descriptions under your images (not overlayed)!

I also checked your site on the iPhone and not sure the descriptions are showing up. Any ideas?

Also, you have the index thumbnails in a single column. Can you provide info?


Link to comment
  • 1 month later...


This topic is now archived and is closed to further replies.

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