Something’s wrong with my product cards and I need help. I have the aspect ratio set to square on my product card media. All my products have a square image as the first one. on mobile it shows the entire picture
but on desktop there’s white space covering the bottom of the images.
The second problem i have is that the price is not centered even tho it’s set to center aligned in the theme editor. Any help would be appreciated! Website: Stray Kids – Seoul Sound
You have some CSS modifications added to your assets/base.css
This:
/* HORIZON THEME — disable forced media ratio */
.product-media,
.product-media__item,
.product-media__wrapper,
.product-media .ratio {
aspect-ratio: auto !important;
--ratio-percent: auto !important;
height: auto !important;
padding-bottom: 0 !important;
}
/* Ensure image defines height */
.product-media img,
.product-media__item img {
width: 100%;
height: auto !important;
object-fit: contain;
}
Then this (which does not work, because liquid code is not processed in .css assets):
/* Spacing */
.product-card .card-gallery {
margin-bottom: {{ settings.product_card_spacing_image_to_metafields }}px !important;
}
.product-card .product-card-metafields-below-image {
margin-bottom: {{ settings.product_card_spacing_metafields_to_title }}px !important;
}
That’s also other code you’d need to undo to make your theme honor these theme settings.
To override those, try adding this code to “Theme settings”=> “Custom CSS”:
@media (min-width:990px){
#MainContent .product-media img,
#MainContent .product-media {
height: unset !important;
margin: 0 !important;
}
.card-gallery {
margin: 1rem;
}
}
As for the product price alignment, you have this
product-price {
padding-block-start: 0 !important;
padding-inline-start: 0 !important; /* this! */
}
both is base.css and also as part of “Custom liquid” section in Footer group.
With all this fixed, you’ll have it like this:
Thank you so much!
