Hi guys,
I’m a bit confused about how images display on mobile vs desktop.
On desktop, my product images look exactly as expected, but on mobile they appear cropped and slightly different in size.
I’m using a standard Shopify theme and haven’t added any custom CSS.
Is this normal, or did I miss a mobile-specific setting somewhere?
Please share the link to your store
If you haven’t added any custom CSS, the behavior is usually controlled by the theme’s built-in settings or the image ratio used in product sections.
Go to Theme Editor → Product template → Media/Image settings
and look for options like image ratio, crop style, or mobile layout.
Adjusting those settings often fixes how images appear on mobile.
hello @lee.sophia in web development, this is normal behavior for images. Themes often request multiple image sizes and let the browser choose the best one for the user’s device (mobile, tablet, or desktop). Using object-fit: contain can prevent cropping, but it may leave empty space and make the layout look less uniform
Hi, hope this answer helps you out 
Why are the images on mobile different from desktop?
In general, images can look different on mobile and desktop because modern websites use responsive design to adapt layouts and visuals to different screen sizes and user experiences. Common reasons include:
-Different screen sizes → images may be resized, cropped, or scaled differently.
-Mobile-first optimization → layouts and images are often adjusted to improve readability and usability on smaller screens.
-Device-specific settings → the same page can have different display rules for desktop and mobile.
If you’re using GemPages
If you’re building your pages with GemPages, you have much more control thanks to its drag-and-drop editor and detailed device-level settings, making it easy to fine-tune how images appear on each screen size.
GemPages uses a responsive design, so images can be resized, cropped, hidden, or positioned differently on each device. The most common causes are:
Responsive resizing
Images automatically scale or crop to fit different screen sizes, which can change the aspect ratio or focal area.
Device visibility settings
An element may be set to show on desktop only, mobile only, or on both.
Custom layouts per device
Sections or layouts may have different settings for mobile versus desktop.
How to fix it in GemPages
Preview per device
Use the Device Switcher in GemPages to check how the image looks on Desktop, Tablet, and Mobile.
Keep one image element and adjust per device
-Select the image element.
-Adjust Max Width/Height, Padding/Margin, and Object Fit.
-Toggle the Device Icon next to each setting to apply different values per device.
(Optional) Use different images for each device
-Prepare optimized images for desktop and mobile.
-Add each version as a separate image element.
-Use Visibility settings to show or hide each image based on the device.
Manually tweak on mobile
-Switch to Mobile View using the Device Switcher.
-Select the image element and fine-tune its size and spacing.
If you’d like, let me know which image or section you’re working on and whether you prefer adjusting a single image per device or using separate images — I’ll walk you through the exact steps.
Hi @lee.sophia
That is normal. Most Shopify themes have responsive image containers that alter their aspect ratio on smaller screens, which may result in cropping. Go to the product card or media settings of your theme editor and make sure the image ratio is the same. Using square/uniform aspect ratio images typically avoids unexpected issues.
Shopify themes automatically resize and crop images on mobile to fit smaller screens and maintain consistent layout.
Many themes use “aspect ratio” settings for product images so grids stay even, which can result in cropping on mobile.
Desktop and mobile use different CSS rules (max-width, object-fit, etc.) that control how images scale and fill their containers.
Check the product image settings:
Go to Online Store → Themes → Customize → Product pages or Product grid settings.
Look for options like “Image aspect ratio” or “Crop images”.
Choosing “Adapt to container” or “Uncropped / Natural ratio” can reduce mobile cropping.
Upload consistent image sizes:
Advanced (optional):
object-fit: contain; if you want the full image visible, but this may break uniform grids.In short: some cropping and resizing on mobile is by design to keep layouts tidy and responsive.