Product page resolution is messed up on different devices

Store Design

Topic summary

A user is experiencing responsive design issues on their Shopify product pages. Product images display correctly on smaller devices (iPhone SE) but appear zoomed in on larger phones (iPhone 14 Pro Max), cutting off important text.

Root Cause:
The theme uses object-fit: cover or similar cropping behavior, which crops images differently across device sizes.

Proposed Solutions:
Multiple respondents suggested nearly identical CSS fixes:

  • Add CSS code targeting .banner__media elements on mobile screens (max-width: 767px)
  • Change object-fit property from cover to contain
  • Add black background to prevent empty space
  • Insert code either in theme.liquid file (above </body> tag) or in the Custom CSS section via theme customizer

Alternative Approaches:

  • Use object-fit: scale-down to avoid empty space while preventing text cropping
  • Implement responsive image sizing with srcset
  • Maintain consistent aspect ratios across all product images

The discussion remains open with no confirmation from the original poster about which solution worked.

Summarized with AI on October 25. AI used: claude-sonnet-4-5-20250929.
1

Hello! I’m almost finished making my website and ive come to the point of testing how it looks on different devices. Fortunately almost everything is fine, besides the product page. For example this is what it looks like on an iPhone SE:

image
image468×781 113 KB

and you can see that the picture is clear and visible, but when switching to a larger phone like an iPhone 14 Pro Max, the picture is zoomed in, making some of the text hard to see:

image
image535×782 119 KB

I do not know how hard this would be to fix, nor do i know if this is even fixable in shopify, but I’d love to hear some suggestions on how I should fix this. Thanks in advance!
crescent.hu

Pw: theaba

2 Likes
2

Hey @crescenthu

Follow these Steps:

  1. Go to Online Store
  2. Edit Code
  3. Find theme.liquid file
  4. Add the following code in the bottom of the file above </ body> tag
<style>
@media screen and (max-width: 767px) {
.banner__media.media.scroll-trigger.animate--fade-in {
    background: black !important;
}
.banner__media.media.scroll-trigger.animate--fade-in img {
    object-fit: contain !important;
}
}
</style>

RESULT:

image
image345×753 54 KB

If you require any other help, feel free to reach out to me. If I managed to help you then a Like would be truly appreciated.

Best,
Moeed

1 Like
4

Hi @crescenthu ,

You can fix it by following these two simple steps:

Step 1: Click on Customize (see screenshot)
Step 2: Add the following CSS code:

@media screen and (max-width: 767px) {
.banner__media.media.scroll-trigger.animate--fade-in {
    background: black !important;
}
.banner__media.media.scroll-trigger.animate--fade-in img {
    object-fit: contain !important;
}
}

to the Custom CSS section (screenshot), then save and check the result.

Let me know if this works for you or if you need further assistance!

Best,
Felix

1 Like
5

Hi There,

Go to Customize > In the Custom CSS section and add the following code > Save > Check the result

@media screen and (max-width: 767px) {
    .banner__media.media.scroll-trigger.animate--fade-in {
        background: black !important;
    }
    .banner__media.media.scroll-trigger.animate--fade-in img {
        object-fit: contain !important;
    }
}

Thanks

6

Hi,

Hope this will help

  • Problem : theme cropping (background-size: cover or object-fit: cover) > different device frames crop image differently.
  • Easy fix : change cropping to contain (background images) or object-fit: contain (img elements).
  • Permanent improvement : consistent image aspect ratio across product images OR add srcset for responsive image sizes.
1 Like
7

Hii @crescenthu

  • Go to Shopify Admin → Online Store → Themes → Edit code
  • Open theme.liquid (or better: base.css / theme.css if available)
  • Add this CSS (just above </body> or in your CSS file):

Fix product images zoom issue

@media screen and (min-width: 768px) {
  .banner__media.media.scroll-trigger.animate--fade-in img {
    object-fit: contain !important; /* ensures full image always shows */
  }
}

If you don’t want empty space around the image but still don’t want text cropped, try object-fit: scale-down:


.banner__media.media.scroll-trigger.animate--fade-in img {
  object-fit: scale-down !important;
}
1 Like