Centering images within product felt container

Site URL: https://trombone-seahorse-afp9.squarespace.com/historic-show

Hi there, 

I'm building a website for an art gallery that needs customization. I want to create a product grid list with the paintings available through the gallery.

Here's the site and pw: 

Site: https://trombone-seahorse-afp9.squarespace.com/config/design

pw: carmelart

There are some landscape and some portraits, so it was important to the gallery to have the paintings not cropped into a particular ratio.

I was able to find custom css to make each painting on display in it's full not-cropped orientation. I have the aspect ratio set to 3:2, so the landscape images fill that ratio, where as the portraits are set inside that ratio. Because of this, the portraits are justified to the left. I want to figure out how to center the images within the 3:2 ratio.

Also, I customized my Quick View button, but it seems off-centered. Help with this would be greatly appreciated!

Here is what I have in my Custom CSS:

// Product Gallery View Custom // 
.grid-image-wrapper img {
    width: auto !important;
    height: 100% !important;
    top: 0 !important;
}

.ProductList-grid.clear {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
}

.ProductItem-details-excerpt {
    font-family: Tuan !important;
}
figure.ProductItem-gallery img {
    width: 100% !important;
    height: auto !important;
    left: 0 !important;
}

//Quick View Custom//
span.sqs-product-quick-view-button {
    visibility: hidden;
}
span.sqs-product-quick-view-button:after {
  visibility: visible;
  content: "QUICK VIEW";
  background: #FFFFFF;
  font-size: 1.4rem;
  font-family: 'Courier New';
  font-weight: 800;
  color: #C29A5A;
  padding: 20px 25px;
  border-radius: 0px;
}

Thank you, thank you, thank you!

Yes!!! This worked perfectly, and exactly what I wanted. Thank you SO much, this is a great help. 

I have one more ask though – the Quick View button is still off centered, how would you go about fixing that? I attached a screen shot below. Ideally I would like the Quick View button to be in the center of the artwork. 

Thanks again for all your help!

Grace

19 hours ago, graciewo said:

Yes!!! This worked perfectly, and exactly what I wanted. Thank you SO much, this is a great help. 

I have one more ask though – the Quick View button is still off centered, how would you go about fixing that? I attached a screen shot below. Ideally I would like the Quick View button to be in the center of the artwork. 

Thanks again for all your help!

Grace

Add this CSS

/* center quick view */
.products.collection-content-wrapper .grid-item .sqs-product-quick-view-button-wrapper {
    padding-bottom: unset !important;
}
span.sqs-product-quick-view-button:after {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%,-50%);
}
span.sqs-product-quick-view-button {
    position: static !important;
    transform: unset !important;
}

This is perfect! Exactly what I wanted. Thank you, thank you, thank you!