graciewo Posted June 21, 2022 Share Posted June 21, 2022 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! Link to comment
Solution tuanphan Posted June 22, 2022 Solution Share Posted June 22, 2022 16 hours ago, graciewo said: 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! Add these attributes .grid-image-wrapper img { width: auto !important; height: 100% !important; top: 0 !important; left: 50% !important; transform: translateX(-50%); } Email me if you have need any help (free, of course.). Answer within 24 hours. Or send to forum message How to: Setup Password & Share url - Insert Custom CSS - Page Header - Upload Custom Font - Upload File - Find Block ID - Contact Customer Care Link to comment
graciewo Posted June 22, 2022 Author Share Posted June 22, 2022 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 Link to comment
tuanphan Posted June 23, 2022 Share Posted June 23, 2022 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; } graciewo 1 Email me if you have need any help (free, of course.). Answer within 24 hours. Or send to forum message How to: Setup Password & Share url - Insert Custom CSS - Page Header - Upload Custom Font - Upload File - Find Block ID - Contact Customer Care Link to comment
graciewo Posted June 23, 2022 Author Share Posted June 23, 2022 This is perfect! Exactly what I wanted. Thank you, thank you, thank you! Link to comment
Recommended Posts
Create an account or sign in to comment
You need to be a member in order to leave a comment