Jump to content

Custom CSS not working on Quick View lightbox

Recommended Posts

Hi, we are using 7.1 to run an art gallery website, we have just added an online shop and having trouble with the Quick view Lightbox.

The images are badly cropped, but also the styling is awful, full screen lots of white space etc. Hoped I could add some custom css like the the styles below, but this is not working at all?. we have now had to turn off quick view until we can find a fix.

Assuming the lightbox code has changed since the CSS was written, does anyone have an update?


.sqs-product-quick-view img {
    width: 100% !important;
    height: auto !important;
       top: 0 !important;

  // change overlay behind lightbox //

.sqs-product-quick-view-lightbox.sqs-modal-lightbox .sqs-modal-lightbox-content .lightbox-background {
    background: #000000 !important; opacity:.5

// lightbox background color //

.sqs-product-quick-view-content {background: #319aab;}

// add a border //

.sqs-product-quick-view-content {border: 5px solid #7cccbd; }

// change close x color //

.sqs-product-quick-view-lightbox-close-button line{stroke: #ffffff !important}

// add a drop shadow //

.sqs-product-quick-view-content {box-shadow: -5px 5px 5px rgba(0,0,0,0.2)}

// button color //

.sqs-product-quick-view-content .sqs-add-to-cart-button {background-color: #dd5241 !important}

// title color //

.sqs-product-quick-view-content .ProductItem-details-title {color: #ffffff !important}

// price color //

.sqs-product-quick-view-content .product-price {color: #ffffff !important}

// excerpt color //

.sqs-product-quick-view-content .ProductItem-details-excerpt {color: #ffffff !important}

// view full item link color //

.sqs-product-quick-view-content .ProductItem-details-quickViewFullItemLink {color: #ffffff !important}

// move photo(s) down //

@media screen and (min-width: 740px) { figure.ProductItem-gallery { margin-top: 100px; }}

Link to comment
  • Replies 1
  • Created
  • Last Reply

Top Posters In This Topic

Top Posters In This Topic

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.