Slide images cropping on different sized screens. Anyway to maintain aspect ratio and not crop?

CozyCovenShop · ‎06-11-2024

https://monayaapparel.com/

pw: sksk

Is there any way to make the images not get cropped on mobile/different sized screens but also not stretch out?

Slide 2 is very apparent and I'm not sure how to stop it.

Thank you.

Dan-From-Ryviu · ‎06-11-2024

Hi @CozyCovenShop

You can try to add this code to theme.liquid file after <head> in Online Store > Themes > Edit code to check

<style>
@media (max-width: 749px) {
.slideshow__media img {
object-fit: contain !important;
}
#Slide-template--22616930189630__slideshow_WiHX6g-2 .slideshow__media {
height: 18rem !important;
}
</style>

- Helpful? Like and Accept solution! Or Support me: Buy Coffees
- Reton: Loyalty & Rewards - Earn points through tasks, redeem for discounts, and enjoy exclusive VIP rewards!
- Ryviu - Reviews & QA app: Collect product reviews, import reviews from AliExpress, Amazon, Etsy, Walmart, Shopee, Dhgate and CSV.
- Lookfy Gallery: Lookbook Image: Easy and fast to create Photo Gallery, Lookbook, Shop The Look.
- Reelfy‑Shoppable Videos+Reels: Create shoppable videos to engage customers and drive more sales.
- Enjoy 1 month of Shopify for $1. Sign up now.

Slide images cropping on different sized screens. Anyway to maintain aspect ratio and not crop?

Slide images cropping on different sized screens. Anyway to maintain aspect ratio and not crop?

Community Blog Articles