Jump to content

Move lightbox

Recommended Posts


Does anyone know how to move the Lightbox to the middle of the screen? Mine is displaying to the left (picture below)... I am assuming this is because I am using a product page and normally there would be text/add to cart/price etc... I took it all out because I wanted the Zoom function but also the Lightbox that a Gallery page doesn't have...

I just want it to display in the center of the screen. Anyone? 

Screen Shot 2020-09-16 at 10.42.47 PM.png

Link to comment
  • Replies 3
  • Views 780
  • Created
  • Last Reply

I used this code: 

//lightbox display full size image not crop image
.gallery-lightbox-item img {
    top: 0 !Important;
    width: auto !important;
    height: 100% !important;


I think this is happening because the width is auto but the height is 100% but it is the only way I can get the entire image to show up and not be cropped. 


Is this there something that can center the image on lightbox? 

Link to comment

okay this worked... 



.yui3-lightbox2 .sqs-lightbox-slideshow .sqs-lightbox-padder {
    position: absolute;
    text-align: left;
    top: 15%;
    left: 2%;
    bottom: 15%;
    right: 2%;
.yui3-lightbox2 .sqs-lightbox-slideshow {
    left: 600px;
    top: 0px;
    width: 1500px;
    height: inherit;
    position: relative;
    font-size: 0px;
.gallery-lightbox-item img {
  width: auto !important;
  height: 100% !important;
  margin: 0 auto;
  left: 50% !important;
  transform: translateX(-50%);
}.gallery-lightbox-item img {
    top: 0 !Important;
    width: 100% !important;
    height: 100% !important;


Link to comment


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.