search

foundation / foundation-emails

Quickly create responsive HTML emails that work on any device and client. Even Outlook.
https://get.foundation/emails/docs/
MIT License
7.77k stars 1.09k forks source link

Layout is screwed up in browsers? #620

Open lspoor opened 7 years ago

lspoor commented 7 years ago

Reporting back from clients, we've sent them a basic template I've done and it appears to be screwed up in IE11 and Chrome (45.0.2454.85).

I've attached screenshots, from what I can see with IE11 there is no width set on the overall design causing it to just fill the width of the viewport (but the layout is still maintained) ie11

Chrome screws up simply when resizing the browser. chrome

Email can be viewed here too - http://m3host.co.uk/email/

lspoor commented 7 years ago

So it appears the following was screwing up the width within IE11, I changed the value to width:100%; and its fixed. So a potential bug here..

img { width:auto; }

rafibomb commented 7 years ago

The images should be set to width: auto; unless you want with: 100% to potentially stretch them. Not seeing this happen in Email clients or in IE11 testing the templates we provide.

It would help to add width attributes to your images to prevent them from rendering wider than the container:

<img src="http://placehold.it/600x350" class="" height="350" width="600" alt="image of nothing">

BTW - that's a really long newsletter. Are you running into the Gmail emails truncating issue?

cossssmin commented 7 years ago

Image size attributes are not taken into account by all clients (i.e. Android native email).

To have responsive images that won't stretch on mobile, the CSS that I use is:

img {
  max-width: 100%;
  width: auto;
  height: auto;
}

Also, for any image that I want to force the size on for both desktop and mobile (think icons), I add both attributes and CSS:

<img src="http://placehold.it/48x48" height="24" width="24" alt="Some icon" style="height: 24px; width: 24px;">

As you already figured from my example, this can be used for Retina support.