Fix Shopify Collection Image Sizes on iOS | Mobile Responsiveness Guide

Hey there, fellow store owners! Let's talk about something that can really trip up your mobile shoppers: images that just won't behave on iOS devices. It's a surprisingly common headache, and one that recently popped up in the Shopify Community forums. The good news? The solution, at least in this particular case, turned out to be refreshingly simple, but the discussion also brought to light some great advanced fixes if you're ever in a tougher spot.

The Case of the 'Super Huge' Collection Images

Our story starts with a store owner, @bigbraingames, running their site www.bigbraingames.co.nz on the Horizon theme. They noticed a frustrating issue: while their site looked perfectly normal on Android and desktop, things went a bit wonky on iOS. Specifically, their collection images were displaying as "super huge" – so large, in fact, that they'd only show half of the image, forcing visitors to zoom out or scroll right just to see the rest of their beautiful collections.

Imagine the frustration! A seamless mobile experience is crucial these days, and having customers struggle just to browse your categories is a definite conversion killer. @bigbraingames even shared an image of how bizarre it looked on iOS Safari after zooming out:

The Community Weighs In: Initial Checks & Reproduction Challenges

As often happens in the Shopify Community, helpful experts quickly jumped in. @ProtoMan44 and @Moeed both checked @bigbraingames's site on various iOS devices and Safari, but here's the kicker: they couldn't reproduce the issue! Everything looked fine on their end. This often points to a caching problem on the user's device, or sometimes, the issue might have been fixed just as they were checking.

@ProtoMan44 even shared screenshots showing how it appeared correctly on their iPhone 13:

The 'Aha!' Moment: A Simple Theme Setting Fix

Turns out, @bigbraingames was already on the case and found their own solution! And it wasn't a complex code tweak, which is great news for many store owners. Their fix was to adjust a theme setting:

"what I did was that in the theme layout edit for the collection images, I chose square instead of 'auto' and that fit them nicely."

This is a brilliant reminder that sometimes the simplest solution is right within your theme's customization options. When an image aspect ratio is set to "auto," themes try to guess the best fit, which can occasionally lead to unexpected scaling on certain browsers or devices, especially with variable image sizes. Forcing a consistent aspect ratio like "square" (or "portrait" or "landscape" if they suit your images better) often resolves these kinds of display inconsistencies.

How to Apply This Easy Theme Setting Fix

If you're facing similar issues, here's how you can check and adjust your image aspect ratio settings:

Go to your Shopify Admin: From your dashboard, navigate to Online Store > Themes.
Customize Your Theme: Find your current theme and click on the Customize button.
Locate Collection Sections: In the theme editor, navigate to the page where your collection images are displayed (e.g., your homepage, or a specific collection page). Look for sections like "Collection list," "Featured collections," or similar blocks that display multiple collection images.
Adjust Image Aspect Ratio: Click on the relevant section. In the settings sidebar, look for an option related to "Image aspect ratio," "Image shape," or "Image size."
Select a Fixed Ratio: If it's set to "Auto" or a similar flexible option, try changing it to a fixed ratio like "Square," "Portrait," or "Landscape" that best suits your images and desired layout.
Save and Test: Don't forget to click Save in the top right corner. Then, check your store on various mobile devices, especially iOS, and clear your browser cache if needed.

When Theme Settings Aren't Enough: Diving into Custom CSS

Now, what if your theme doesn't have such a straightforward setting, or your issue is a bit more stubborn? The community discussion also offered some excellent CSS-based solutions. This is where you might need to get a little more comfortable with your theme's code, or enlist the help of a developer.

Basic Responsive Image CSS

@eva_greene provided a simple, effective CSS snippet to ensure images are responsive on mobile:

@media only screen and (max-width: 768px) {
  .collection-image {
    max-width: 100%;
    height: auto;
    object-fit: contain;
  }
}

This code targets screens up to 768px wide (common for tablets and phones) and ensures any element with the class .collection-image will not exceed its container's width, while maintaining its aspect ratio and fitting within its bounds.

Advanced iOS-Specific & Flexbox Adjustments

For a more comprehensive fix, especially if the problem involves complex grid layouts or specific iOS rendering quirks, @mastroke shared a detailed CSS block. This code leverages WebKit extensions (often needed for Safari/iOS compatibility) and adjusts flexbox properties to handle collection lists and items on smaller screens:


@media screen and (max-width: 749px) {

  .collection-list__item img,
  .collection-list__item .media,
  .card--collection img {
    max-width: 100%;
    width: 100%;
    height: auto;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
  }

  .collection-list,
  .collection-list__grid {
    overflow-x: hidden;
    max-width: 100vw;
    -webkit-overflow-scrolling: touch;
  }

  .collection-list__item {
    max-width: 50%;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    -webkit-flex-shrink: 0;
    flex-shrink: 0;
  }
  

  .collection-list__grid {
    display: -webkit-flex;
    display: flex;
    -webkit-flex-wrap: wrap;
    flex-wrap: wrap;
  }
}

This snippet is more robust, not only ensuring images fit but also controlling the layout of the collection grid itself, preventing horizontal scrolling and ensuring items wrap correctly. The -webkit-overflow-scrolling: touch; is a nice touch for a smoother scrolling experience on iOS.

How to Add Custom CSS to Your Shopify Theme

If you decide to go the custom CSS route, here's how you'd typically add these snippets:

Backup Your Theme: Before making any code changes, it's always wise to duplicate your theme (Online Store > Themes > Actions > Duplicate).
Edit Theme Code: In your Shopify Admin, go to Online Store > Themes. Click Actions > Edit code for your live theme.
Find Your Stylesheet: Look for a file named theme.css, base.css, or something similar under the Assets folder. It might also be a .scss or .liquid file that compiles into CSS.
Paste the Code: Scroll to the very bottom of the file and paste the chosen CSS snippet(s).
Save and Test: Click Save and thoroughly test your website on various devices and browsers, especially iOS, to ensure the changes have resolved the issue without introducing new ones. Clear your device's cache as needed.

So, there you have it! What started as a frustrating display bug on iOS turned into a great community discussion revealing multiple paths to a solution. Always start with your theme's built-in settings – you might be surprised at how much control you already have. But if that doesn't do the trick, remember that custom CSS and the collective wisdom of the Shopify community are powerful tools to get your store looking perfect on every screen. Happy selling!

Taming Giant Images: How to Fix Oversized Shopify Collection Images on iOS