Fixing broken responsive images on Shopify
So, you’ve just set up your theme and added an “Image with Text” section—or any other image-based section that’s supposed to look clean and professional. Everything looks perfect on desktop, but once you switch to mobile, the image gets cropped awkwardly, and the edges are being cut off. Not ideal.
This usually happens due to how background images are handled with object-fit, background-size, or fixed container heights that don’t adapt well to smaller screens. It’s a common issue across many Shopify themes.
But no worries—I’m going to walk you through a simple, permanent fix that ensures your images display beautifully across all devices. This method is fully compatible with every theme, and you won’t need to rely on any third-party apps or hacks.
Let’s get into it.
Downloading the section file
Download the files clicking here.
The installation process
-
In your Shopify admin, go to Online Store > Themes > Actions > Edit Code.
-
Under sections click on "Add a new section".
-
Write the following: ezfy-responsive-banner.
-
Click on the button create section.
-
Inside this new file, delete everything in it.
-
Copy the code that you have downloaded, either the free or pro version, paste it in and save.
Adding it to your website via the customize panel
-
Click on customize theme at the top of the page.
-
Find the option add section. You may need to scroll down if you have a lot of sections.
-
Look for custom by EZFY. You'll now see your section there. Click on it to add it to your theme.
-
Now just customize it as per your wish and click on save once you're done!
If you need any further assistance we are here for you! Reach out to ezfycode@gmail.com and we'll be happy to help.