Hello. Our website is www.lakeandlure.co. We’re running a 12 Days of Christmas sale currently. Our Hero banner is sized according to Impulse themes, parallax is turned off, and I uploaded a specific smaller banner for our mobile users. For desktop users, the banner looks great. For mobile phone users, the banner is stretched and looks bad. The banner is still stretched and looks wrong. Can someone help me out? I tried to insert code provided by other experts from this help forum but none of them worked. Thank you!
Topic summary
Mobile hero banner in the Shopify Impulse theme appeared stretched on phones, despite parallax being off and a smaller mobile-specific banner being uploaded. Desktop display was fine; earlier forum code attempts had not helped.
Proposed fix: add a Custom CSS rule in the hero banner section that, for small screens (max-width ~749px), sets the hero image to use object-fit: contain with high priority. This makes the image scale to fit within its container without distortion, preventing stretching (potentially adding letterboxing space instead of cropping).
Outcome: The store owner implemented the CSS and confirmed it resolved the issue. No further changes were required.
Status: Resolved; no open questions or disagreements.
Please try to add this code to your hero banner section Custom CSS and check if it works
@media (max-width: 749px) {
.hero__image {
object-fit: contain !important;
}
}
Dan - you are the best! Thank you so much 
Buying you a coffee today!
1 Like
Thanks and very welcome.