Why does my hero image keep getting cropped weird on desktop (and differently on mobile)?
A wide hero banner that looks fine in the theme editor can crop out the subject, logo, or text once it's live on desktop or mobile — here's why, and how to fix it without touching code.
What's going on
My homepage hero banner looked perfect when I uploaded it, but on desktop the top of the photo is chopped off and half my headline text is hidden behind the image edge. On mobile it's cropped completely differently — sometimes the exact opposite side gets cut. I've tried re-uploading the same image at a higher resolution and it doesn't change anything.
This happens because most Shopify hero/banner sections stretch your image to fill a fixed-height box using CSS object-fit: cover, which scales the image up and crops whichever edges don't fit the container's aspect ratio. A single image almost never has the same aspect ratio as both the wide desktop banner and the tall mobile banner, so unless you tell Shopify which part of the image to protect, it defaults to a plain center crop — which can land right on top of a face, logo, or text.
Why it happens
The root cause is an aspect-ratio mismatch combined with a fixed-height container. Desktop hero sections are typically very wide and short (imagine 16:9 or wider), while the same section on mobile becomes much taller relative to its width. When you upload one image for both, the browser crops it to fit whichever box it's rendering into, and by default it crops evenly from the edges toward the center — which frequently isn't where your subject actually is.
It's made worse by two common merchant mistakes that show up repeatedly in troubleshooting threads: uploading only one image and expecting it to work at every breakpoint, and never previewing the live page at actual desktop and mobile widths (theme editor previews can render slightly differently than a real browser viewport, especially at in-between tablet sizes).
5 ways to fix it
Set (or reset) the focal point on the image itself
In the theme editor, click the image in your banner section — most Online Store 2.0 themes (Dawn and its forks included) show a focal-point picker where you drag a target-style icon onto the part of the image that must stay visible. The theme then applies that point as the CSS object-position for the cropped container, so as the section resizes across breakpoints, the crop recenters on your chosen point instead of the image's literal center. This costs nothing and takes under a minute per banner, but only works if your theme's section schema actually includes an image_picker with focal point support — older or heavily customized sections sometimes don't expose it.
Upload a separate image for mobile
Look for a second image field in the section settings, often labeled something like "Mobile image" or "Image (mobile)" — Dawn's image-banner section has this by default. Desktop hero images are typically wide (16:9 or wider) while mobile screens are tall and narrow, so a single image almost never crops well on both. Uploading a portrait-oriented crop of the same photo for mobile, with your subject and text safely inside the frame, fixes the problem at the breakpoint level rather than fighting the browser's automatic crop.
Change the section's image height / fit setting
Most banner sections let you choose the image height (small, medium, large, or "adapt to image") instead of a fixed pixel height. A fixed or large height forces object-fit: cover to crop more aggressively to fill the box; switching to "adapt to image" or a shorter height setting can eliminate cropping entirely for that section, at the cost of a less dramatic full-bleed look.
Re-crop the source image before uploading, with margin to spare
Before uploading, crop the photo yourself in an image editor to roughly the aspect ratio your theme's banner will render at (check your theme docs or inspect the live section at both breakpoints), and keep any face, logo, or text a good distance from every edge. Automatic cropping always trims from the outside in, so a source image with generous "safe space" around the subject survives unexpected crop ratios far better than one framed tightly.
Customize the section's CSS if your theme has no focal-point or mobile-image option
If you're on an older theme or a heavily modified section that lacks both a focal-point picker and a mobile image field, the fix has to happen in code — typically adjusting the object-position value or adding a mobile-specific background-image via a media query in the section's CSS. This is a one-time theme edit rather than something you redo per banner, but it does require comfort editing Liquid/CSS or a developer to do it for you.
Bottom line
Cropped hero images are almost always a mismatch between one image and two very different container shapes (wide desktop vs. tall mobile), and Shopify already gives most 2.0 themes the tools to solve it natively — focal point selection and a separate mobile image — before you need to touch any code. Start with those two settings, then adjust image height and re-crop your source photo if the problem persists. This is a theme-configuration issue, not something a general-purpose app is built to fix, so if it keeps recurring across many banners, a one-time theme customization is more appropriate than adding an app for it.
Browse the rest of the problem library, run a free storefront scan to catch issues like this automatically, or email us and we'll work out a custom solution for it.