Goal: Reduce Multicolumn section images in Shopify’s Dawn theme to smaller than the default one‑third width on mobile, while keeping compatibility across devices.
What was tried: A CSS override was applied: .multicolumn-card__image-wrapper–third-width { width: 10% !important; }.
Outcome: The change works on most iPhones tested, but on an iPhone 12 the images appear greyed out, as shown in the attached screenshot (image is central to understanding the issue).
Request: Guidance on how to keep images smaller on mobile without causing rendering issues on certain devices (specifically iPhone 12).
Status: Unresolved. The root cause of the iPhone 12 rendering problem and a cross‑device compatible CSS solution have not been identified. The poster seeks instructions or best practices to achieve consistent, smaller image sizing across mobile devices.
I am utilizing the Dawn theme and I would like to make images smaller than 1/3 width of the column.
I used the following coding: .multicolumn-card__image-wrapper–third-width {
width: 10% !important;
}
This was successful on all mobile iPhones except for my clients iPhone 12 , see screenshot for greyed out images. Can you please provide instructions of how to make the images smaller but compatible on mobile?
