Header image squashed/distorted

Store Design
, , , ,

Topic summary

Issue: In the Shopify OUTSIDERS theme, the store’s header logo became progressively squashed on mobile (and when resizing the desktop browser to mobile width). The merchant had already tried best practices (512×512 logo, multiple file variations, and some custom code) without success. A screenshot was provided.

Fix: Add a single CSS rule in the theme editor. Path: Customize → Header section → Custom CSS. Code: .header__heading-logo { height: auto; }

Why it works: Setting the logo’s height to auto preserves its aspect ratio, preventing distortion as the viewport narrows.

Outcome: The merchant confirmed the change worked immediately. No further issues reported.

Status: Resolved.

Summarized with AI on December 11. AI used: gpt-5.
1

Hey all! I’ve recently gotten the OUTSIDERS theme and my header image is squashed in mobile. When on my computer and I resize my browser window to snap it into mobile size, the logo progressively gets more and more squashed, does that make sense?

I’ve searched for a few things and can’t seem to figure out why. I’ve followed best pratice and made the logo 512 x 512, tried a few different files and added some code that I found online, but still not sure whats up.

If anyone can shine a light on the issue, that would be amazing. Thanks

Website is: www.mundomoo.com

Screenshot 2025-11-09 at 08.35.32
Screenshot 2025-11-09 at 08.35.32994×1366 115 KB

2

Go to Customize and paste this code into “Custom CSS” setting of the Header section.

.header__heading-logo {
  height: auto;
}
1 Like
4

Tim, you’re the best, worked like a charm!