Collection Image Sizes too big on IOS

Store Design
1

My website is www.bigbraingames.co.nz and the theme is horizon

right now it looks fine on android and desktop, but on IOS it looks really weird. For some reason the collection images are super huge compared to the product images causing it to only display half and ppl on IOS need to either zoom out or scroll right in order to see the other column of the collections.

Is there a way to resize the display of collection image items so that they fit normally and IOS users don’t need to zoom out/scroll right to see it all?

I have an attached image to show how weird it looks on ios safari (this is after I zoom out on safari)

Thanks

ios 2
ios 21536×2048 140 KB

2

@bigbraingames Hey, thanks for posting here.
I have checked on my IP13, and I’m not finding any fault in the layout like in your image.

please cleare you cache and then again check on both Safari and Chrome.

Image
Image1170×2532 439 KB

Image
Image1170×2532 445 KB

3

Hi @bigbraingames

Check your collection image CSS for fixed widths or heights causing overflow on iOS. Add this in your theme’s CSS to limit image size on mobile:

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

Clear cache after updating. If it persists, inspect with Safari’s dev tools or get a dev to tweak theme code.

5

try adding this code in theme.css or base.css
basically youe css should taget it on ios devices. Concept of webkit needs to be used here



@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;
  }
}
6

Hey @bigbraingames

As mentioned by @ProtoMan44 , I have also checked it on multiple iOS devices and in Safari and I don’t see the problem occurring on my end as well. Which device are you on? Let me know.

Best,
Moeed

7

@ProtoMan44 @Moeed i had already fixed it. 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.

8

Hi @bigbraingames

Welcome to the Shopify Community! Please share your store URL and password (if it’s password-protected), so I can check and provide you with the exact solution.

Best regards,
Devcoder :laptop: