If someone can help I’d be very grateful. I have no idea why mwcImageSmall.jpg is not loading on in Safari on iPhone (smallest viewport). I haven’t fully tested it, but all the other images are loading in Safari and I have no idea why this one isn’t. It’s only the image in the “2LK ready to dominate at upcoming MWC 2015” on the smallest viewport size:
http://2lk.com/emailTemplates/V1/index.html
Does anyone know why?
Thanks in advance
The entire page looks perfect to me in my iphone6.
I just realized your page isn’t being responsive because of you not having this HTML in there. Please put this in and try again. Once you put that in, I can actually relook in Safari iPhone.
<meta name="viewport" content="width=device-width,initial-scale=1">
I would assume that it is because your container has a limit of 727px but then the left table (for the image is 363px and the table on the right 355px + 25px padding. That makes 743px.
What I mean… Giving a fixed size to your container doesn’t help if you exceed the measures later on 
Thanks for taking a look Ryan. I believe the viewport tag is used for html emails, which is why I didn’t put it in. Although you’re quite right in that it can’t be viewed correctly in the browser unless it’s there.
Molona, very good point. Thanks very much I’ll give it a try and will let you know.
That didn’t work I’m afraid.
The image is replaced by another image using media queries, in the head. So, this image has got a display: none; on it when it hits mobile size. So, the width of these columns won’t make any difference on mobile.
Do I understand that you know now where the problem is?
Could you make a second test page with my meta tag in place?
Right now when I view that page in my phone, I see the desktop version, but a zoomed out version of it since the meta tag isn’t in place.
I’m not sure about this statement. The meta viewport tag is not used normally in HTML e-mails but yours is responsive. So it will need I assume.
Perhaps a screenshot from your iphone will help us see what you are seeing. You should be seeing hte desktop version of the page on your iphone (from that link.)
Edit-Also I should add that when I view that page, it 100% is a replica of when I view it in Chrome on desktop. There is no difference. The image problem is non-existent. I cannot replicate your problem as of right now on my iphone when I go to that link.
The below version has the viewport tag added for your reference
That’s the same link? And I don’t see the viewport on that.
I edited the link to V2.
All images load for me in Safari, even at the narrowest width.
As mentioned, the @media rules won’t work on small screens without the meta viewport element. However, Safari on the iPhone is one thing, but things get much nastier when these are sent as emails, where support for fancy layouts if far more limited.
Yeah, safari on iphone6 displayed everything perfect. One hand scrolling on my desktop, one hand scrolling the iphone. Everything was perfect.
This is for an email? Most email clients will not support @media queries.
That is one reason I’ve been following this discussion with interest.
Last I knew, I’d be happy if email clients didn’t need to have mark-up from 1999 eg, nested tables for layout, inline CSS
So getting them to be responsive seems like an awful big jump in expectations to me.
Support isn’t as bad as one might expect—although some pretty major players don’t have any support:
This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.