The bottom of the image is being cutoff on mobile only.Here’s a comparison of what its supposed to look like
(This is featured collection and product grid)
Topic summary
A user reports that product card images are being cut off at the bottom on mobile devices only, affecting both featured collections and product grids. The desktop version displays correctly.
Proposed Solution:
A CSS fix was suggested involving:
- Navigating to Online Store → Themes → Edit code
- Locating the
base.cssfile - Adding a media query targeting mobile screens (max-width: 320px) to set product card image height to 90%
Current Status:
The proposed CSS solution did not resolve the issue. The problem remains unresolved, with the user confirming the fix was unsuccessful. One responder claimed they couldn’t reproduce the issue on their devices, suggesting it may be device-specific or require further investigation.
Hi, @ypcollective
Please share the store URL so that I can assist you.
@ypcollective
I checked on devices, no problem
To be more sure, follow these steps:
step 1: Please navigate to Online store => Themes => Edit code
step 2: Search file base.css
step 3: add code below file
@media only screen and (max-width: 320px) {
.grid.product-grid .card-wrapper.product-card-wrapper .card__inner .card__media .media img {
height: 90%;
}
}
step 4: go to store front and result:
Hope this can help you
Kind regards
Sorry this did not work