I’ve been trying to figure this out for a bit now. I’m not very familiar with code and I don’t know exactly what’s to be addressed but when you view my site specifically on an iPhone version 15 or newer will only display the mobile version of images. I have a desktop version and mobile of each image for better display but it only shows the desktop version. If you’re on an older iPhone it seems to have no issue. Here’s my website please let me know if you need more info to help me resolve this.
Hey @Salty-mama ,
This could be due to one of several issues:
- Media query breakpoints not capturing newer iPhone viewport sizes
- Image source selection logic not correctly detecting newer iOS devices
- CSS display properties being overridden on newer iOS versions
- Resolution-specific image loading that’s not accounting for recent iPhone models
To properly diagnose and fix this, I’d need to see your HTML/CSS code that handles the responsive image loading, particularly how you’re implementing the switch between desktop and mobile versions.
Could you share:
- The HTML code for one of the affected images
- Any CSS media queries you’re using for mobile detection
- Any JavaScript that might be handling image swapping
Once I have this information, I can provide a more specific solution to ensure both desktop and mobile images display correctly across all devices. Even better, if you can share/ DM your collaborator code. Our team would love to fix this for you, for free.
Cheers!
Shubham | Untechnickle
1 Like
This issue likely stems from how newer iOS versions interpret responsive image tags or CSS media queries. Make sure you’re using the picture element with proper source tags for mobile and desktop images, and confirm your media queries are targeting the correct screen widths. Also, check if your theme or any lazy-loading script is overriding the mobile image behavior. If you’re not comfortable with code, it may help to consult a developer or use a Shopify app designed for responsive image handling.