CS0
iPhone 5 and 6 Image Problem
Hi, I am working on an email with two rows of three images placed next to each other. It works well throughout all email clients until I get to iPhone5, 6 and 6s, where in iPhone5 the first two images seem to be shrunk even further then the last image. Creating a white line between the first and the second row.(see the image attached).
In iPhone6 and 6s it is only the first image that is causing this issue.
Here is the code as well.
I have tried to place all images in individual tables, add width to individual tables, TDs and image tags, I even turned PX to percentage and nothing seem to be working. Anybody has any idea?
Cheers
Hello Ollie ! This looks like a problem with fluid images in a container with an odd size. This is something that WebKit and Blink are pretty bad at. For example, if you have two images with a size of 200x200 that you want to be displayed next to each other in a container of 305px, this means that your images will be resized by the browser at 152px for one, and 153px for the other. Thus, it will create a different in height between the two images.
In your example, I think this might be caused by the 11px wide spacer you have on the left. This is something that you can typically see in Chrome or Safari in the following example when you resize your window :
Unfortunately, there is no magical solution. Finding a fix that works in an odd sized screen will break it in an even sized screen. But since most screens are at an even resolution, you can try to make sure that all your sizes (images, spacers, etc…) adds up to an even size.