A user is experiencing issues with product images (shoes) not fitting properly within their containers on the mobile version of their Shopify store, despite having already resized them for desktop.
Problem: Product photos are not displaying correctly in their boxes on mobile devices, as shown in attached screenshots.
Solutions Provided:
Two community members offered CSS-based fixes:
Solution 1: Add CSS code to theme.liquid before the </body> tag using a media query targeting screens under 767px width, applying object-fit: contain to thumbnail button images.
Solution 2: Insert CSS code in theme.liquid before the </head> tag to adjust image display properties.
Both solutions involve editing the theme’s liquid file and adding custom CSS to control how product images render on mobile devices. The user’s store URL was provided for reference.
Hi there,
I’ve already resized the photos on the desktop version, but now I need to adjust them for mobile as well. The goal is to make sure all the shoes fit properly within the box. I’ll send two pictures where you can clearly see the issue. Thanks a lot for your help! 
Website: https://81e325-28.myshopify.com/
0007
Hello @radaApeta
You can add code by following these steps
Go to Online Store → Theme → Edit code.
Open your theme.liquid file
Paste the below code before on theme.liquid
my reply helpful? Click Like to let me know!
your question answered? Mark it as an Accepted Solution.
