I made a layout with tables. Design is 2 columns in the first row and 3 on the second. When screen is below 600px width <td> wraps because i made it inline-block.
And the problem is everything works well on the web, android, mac but ios devices has layout like on desktops
code: https://jsfiddle.net/jcp2hz7v/1/
links are broken intentionally.
What you can do is add a #media query so that below 600px the relevant <td>s are set to max-width:100%. That way, they will cover the whole line. As it is, they only move to the next line when they run out of space - and some iPhones are very large!
Add this to the head (this works on mobiles, excepting only Gmail IMAP):
<style type="text/css">
#media screen and (max-width:600px) {
td.mobile {max-width:100%!important;}
}
</style>
Add the 'mobile' class to the second row of <td>s
Your code is not working well on Outlook either, which does not respect max-width. You'll need a wrapper to ensure it stays at 600px, i.e.
<!--[if (gte mso 9)|(IE)]>
<table width="600" align="center" style="border-collapse:collapse;mso-table-lspace:0pt;mso-table-rspace:0pt;border-spacing:0;font-family:Arial, sans-serif;color:#333333;" >
<tr>
<td style="padding-top:0;padding-bottom:0;padding-right:0;padding-left:0;border-collapse:collapse;" >
<![endif]-->
<table border="0" cellpadding="0" cellspacing="0" width="100%" style="max-width: 600px; min-width: 230px; width: 100%">
...
</table>
<!--[if (gte mso 9)|(IE)]>
</td>
</tr>
</table>
<![endif]-->
Related
I'm trying to create an HTML email that will display properly in all widely used email clients. I'm wrapping the whole email in a table, and I'd like it to have a width that is up to 98% of the available width, but no greater than 800 pixels. Like this:
<table style="width:98%; max-width:800px;">
But I'm not doing it that way, since according to this Outlook 2007 does not support the CSS width property.
Instead, I'm doing this:
<table width="98%">
Is there any way to also set a max-width without relying on CSS?
Yes, there is a way to emulate max-width using a table, thus giving you both responsive and Outlook-friendly layout. What's more, this solution doesn't require conditional comments.
Suppose you want the equivalent of a centered div with max-width of 350px. You create a table, set the width to 100%. The table has three cells in a row. Set the width of the center TD to 350 (using the HTML width attribute, not CSS), and there you go.
If you want your content aligned left instead of centered, just leave out the first empty cell.
Example:
<table border="0" cellspacing="0" width="100%">
<tr>
<td></td>
<td width="350">The width of this cell should be a maximum of
350 pixels, but shrink to widths less than 350 pixels.
</td>
<td></td>
</tr>
</table>
In the jsfiddle I give the table a border so you can see what's going on, but obviously you wouldn't want one in real life:
http://jsfiddle.net/YcwM7/
There is a trick you can do for Outlook 2007 using conditional html comments.
The code below will make sure that Outlook table is 800px wide, its not max-width but it works better than letting the table span across the entire window.
<!--[if gte mso 9]>
<style>
#tableForOutlook {
width:800px;
}
</style>
<![endif]-->
<table style="width:98%;max-width:800px">
<!--[if gte mso 9]>
<table id="tableForOutlook"><tr><td>
<![endif]-->
<tr><td>
[Your Content Goes Here]
</td></tr>
<!--[if gte mso 9]>
</td></tr></table>
<![endif]-->
<table>
The short answer: no.
The long answer:
Fixed formats work better for HTML emails. In my experience you're best off pretending it's 1999 when it comes to HTML emails. Be explicit and use HTML attributes (width="650") where ever possible in your table definitions, not CSS (style="width:650px"). Use fixed widths, no percentages. A table width of 650 pixels wide is a safe bet. Use inline CSS to set text properties.
It's not a matter of what works in "HTML emails", but rather the plethora of email clients and their limited (and sometimes deliberately so in the case of Gmail, Hotmail etc) ability to render HTML.
Bit late to the party, but this will get it done. I left the example at 600, as that is what most people will use:
Similar to Shay's example except this also includes max-width to work on the rest of the clients that do have support, as well as a second method to prevent the expansion (media query) which is needed for Outlook '11.
In the head:
<style type="text/css">
#media only screen and (min-width: 600px) { .maxW { width:600px !important; } }
</style>
In the body:
<!--[if (gte mso 9)|(IE)]><table width="600" align="center" cellpadding="0" cellspacing="0" border="0"><tr><td><![endif]-->
<div class="maxW" style="max-width:600px;">
<table width="100%" border="0" cellpadding="0" cellspacing="0" bgcolor="#FFFFFF">
<tr>
<td>
main content here
</td>
</tr>
</table>
</div>
<!--[if (gte mso 9)|(IE)]></td></tr></table><![endif]-->
Here is another example of this in use: Responsive order confirmation emails for mobile devices?
This is the solution that worked for me
https://gist.github.com/elidickinson/5525752#gistcomment-1649300, thanks to #philipp-klinz
<table cellpadding="0" cellspacing="0" border="0" style="padding:0px;margin:0px;width:100%;">
<tr><td colspan="3" style="padding:0px;margin:0px;font-size:20px;height:20px;" height="20"> </td></tr>
<tr>
<td style="padding:0px;margin:0px;"> </td>
<td style="padding:0px;margin:0px;" width="560"><!-- max width goes here -->
<!-- PLACE CONTENT HERE -->
</td>
<td style="padding:0px;margin:0px;"> </td>
</tr>
<tr><td colspan="3" style="padding:0px;margin:0px;font-size:20px;height:20px;" height="20"> </td></tr>
</table>
<table width="100%;">
<tr>
<td> <!--Right Space (Variable Width)--> </td>
<td> <!--content (Width Set - High Priority)--> </td>
<td> <!--Left Space (Variable Width --> </td>
</tr>
</table>
I am having a problem with coding emails where I want margins to be different based on screen size. It works fine with media queries but i've realized that there are some email clients that don't support them. I've also tried using width percentages but I want the content to be about 90% on a mobile sized screen and about 50% on a larger screen. I am using tables and empty table cells to create my margins and can only use inline styling.
I want to know if there is a way to set css properties so that when the screen width decreases the content cell has the highest priority for it's size and the left and right 'margins' will be the ones to decrease in width.
This sounds like a use case for max-width. You can set the default width of the element to 90%, but define a max width that is half of your total desktop display width. You would also need to include MSO conditional due to Outlook's lack of support for this attribute. CSS (for HTML email) reference guide
See below:
<!--[if (gte mso 9) | (IE)]><table align="center" width="640"><tr><td align="center"><![endif]-->
<table align="center" width="100%" style="max-width:640px;">
<tr>
<td align="center">
<!--[if (gte mso 9) | (IE)]><table width="320" align="center"><tr><td align="center"><![endif]-->
<table width="90%" align="center" style="max-width:320px;">
<tr>
<td align="center">This content will be at 90% width of the container up to 320px wide, where it will stop</td>
</tr>
</table>
<!--[if (gte mso 9) | (IE)]></td></tr></table><![endif]-->
</td>
</tr>
</table>
<!--[if (gte mso 9) | (IE)]></td></tr></table><![endif]-->
As my experience,email clients are allows only inline-style.
According to your requirement,you need to set below the codes,
<div><!--email client body-->
<table width="650px;padding:50px;"><!--you can give padding not only margin properties of CSS-->
<table style="width:100%">
<!--content-->
<table style="padding:20px"></table><!--Again added to padding instead of margin--->
</table>
</table>
</div>
Note: Email mobile application only support the swing the contents in email.If you open email in browser not swing the all contends.
I have been working in an html email template. And I am almost at the end of my work. The template looks pretty good in mayor email clients. But there is a problem with Outlook 2007/2010/2013. Those three guys do not respect the max width of my template. I do not really know why this happens.
Do you have any idea?
Any advice will be appreciated. Thank you.
<body style="margin:0; font-size:13px; font-family:'Trebuchet MS', Helvetica, Verdana, Arial;" bgcolor="#bb9dd8">
<table width="100%" cellspacing="0" cellpadding="0" border="0">
<tr>
<td bgcolor="#bb9dd8">
<!-- //Begin Main Container\\ -->
<table class="mainContainer" style="margin-top:20px;" width="640px" align="center" cellspacing="0" cellpadding="0" border="0">
<!-- //From here begin header and the layout structure\\ -->
That was the piece of code where the max width is defined. Thank you.
You are correct, PC versions of Outlook 2007+ do not support max-widths. You can take one of two approaches here to achieve a fluid width, though.
Use some Outlook conditional code to establish a fixed width table. This will be ignored by other email clients.
<table width="100%">
<tr>
<td>
<!--[if gte mso 9]>
<table width="640" style="width:640px">
<tr>
<td>
<![endif]-->
Put main content table here
<!--[if gte mso 9]>
</td>
</tr>
</table>
<![endif]-->
</td>
</tr>
</table>
Another approach involves using a media query, and a 3 column table. The outer columns will have non-breaking spaces, and the middle will be set to your Outlook width and contain your main table.
<style>
#media only screen and (min-width: 640px) {
.maxW {width: 640px !important;}
}
</style>
<table align="center" width="100%" >
<tr>
<td> </td>
<td align="center" valign="top" width="640" style="width:640px" >
<table align="center" style="margin: auto; max-width: 640px" width="100%" class="maxW">
<tr>
<td>Put your header image here</td>
just remove px from width and you can try using width="640" instead of width="640px"
Either wrap in a defined table in Mso conditional or set an ID with a defined width in style sheet that changes back to percent in media queries. Outlook does not respect max-width. See here for CSS compatability.
Also - you do not put the px when defining the HTML width. That is only in CSS. E.g. Width="640" not width="640px"
I have a table element which I'm going to send as an email.
I want it to render on outlook 2010, gmail native for android, and gmail on chrome on android.
I would like my table to have 100% width upto 600px.
One solution would be do with fixed settings, and have media queries.
#media screen and (max-width: 600px) {
table[class="responsive-table"] {
width: 100% !important;
}
}
This works fine in all but gmail on chrome on android, which takes the 600px width and overflows the screen, breaking the whole layout.
So I thought about doing a fluid layout, and putting 100% to the table, and giving it a max-width, but now outlook does not respect max-width, so it looks too wide in outlook.
So I can't use fluid because it looks bad on outlook, and I can't use fixed because it looks bad on gmail on chrome on mobile.
Is there any way I can make the look ok in both? Is there any hack for this?
Media queries doesn't work in Gmail App for Android and iPhone.
This can be done constructing basic layout shown below.
Tested in 60+ configurations, including:
Outlooks 03/07/10/11/13
iPhone 5 iOS7
iPhone 5/6 iOS8
Gmail App iPhone & Android
Android 4.4.4
<!-- wrapper -->
<table align="center" width="100%" style="width: 100%;">
<tr>
<!-- this cell scales automatically, don't set width on it -->
<!-- add to ensure it will be rendered -->
<td> </td>
<!-- in the middle cell you set your max-width -->
<!-- notice double declaration for yahoo in html attribute -->
<td align="center" width="600" style="width: 600px;">
<!-- this table scales up to parent cell -->
<table align="center" border="0" width="100%" style="width: 100%;">
<tr>
<td align="center">
<!-- content -->
</td>
</tr>
</table>
</td>
<!-- this cell scales automatically, don't set width on it -->
<!-- add to ensure it will be rendered -->
<td> </td>
</tr>
</table>
Use conditional code with fluid layout. I also would assign a class or ID to your container and have it as a defined width (e.g.600px) in style block in head with media queries pushing back to percent after dropping below that width. This is for Apple mail and a couple other clients that do not respect max-width.
E.g.
<head><style> #outlook {width:600px;}</style></head>
<body>
<!--[if (mso) | (IE)]>
<table width="600" align="center" cellpadding="0" cellspacing="0" border="0">
<tr>
<td>
<![endif]-->
<table width="100%" align="center" cellpadding="0" cellspacing="0" border="0" style=" max-width: 600px; border-collapse:collapse;" id="outlook">
<tr>
<td align="center"> YOUR CONTENT HERE</td>
</tr>
</table>
<!--[if (mso) | (IE)]>
</td>
</tr>
</table>
<![endif]-->
</body>
I want to set the image size to 100% inside of td.
<table style="width:100%; max-width:960px; margin:auto;">
<tr style="width:100%;">
<td background="http://source/bg.png">
<img src="http://source/logo.png" style="margin-left:35%;" />
<h1 style="text-align:center;"> Some text on top of bg-image inside a td</h1>
</td>
</tr>
</table>
So I have a big td with bg-image and a logo on top of it with some text.I am doing css all in-line to be able to send html email.
The problem is that the image has it's natural size, and doesn't resize to 100% to fit the td size.
Firstly, emails are a pain when it comes to CSS / HTML Standards... Google will help you here.. In general.. Your best testing this with outlook/hotmail/gmail.. Outlook is one of the worse for supporting HTML Emails.
As for the code, have a look at this example instead: http://jsfiddle.net/82bd2fyh/
<table style="width:100%; max-width:960px; margin:auto;">
<tr style="width:100%;">
<td style="background-size:100% 100%; background-image:url('http://placehold.it/550x550');">
<img src="http://placehold.it/100/09f/fff.png" style="margin-left:35%;" />
<h1 style="text-align:center;"> Some text on top of bg-image inside a td</h1>
</td>
</tr>
</table>
Please note though, background-size is only supported in CSS3, IE9+..
Otherwise another option is to use a normal image tag and stretch that to 100% then position with a z-index your content / a div over top of it.
Email Support Guide Line: https://www.campaignmonitor.com/css/
The above is also under the assumption you are talking about the background image and not the logo / img tag.
If you mean your img tag, then simply apply a style to it.. But do believe you mean your TD background image
Building on Mayem's answer, which is 100% right in almost all email clients, I wanted to add a bit more to it. This will not work in Outlook at all and has potential for issues with Gmail app.
1.) Outlook almost always forces actual size of the image, regardless of CSS or HTML resizing (size is also based on the PPI setting on your computer) so it is always best to size your images to fit what you want them to display at in Outlook and then control size for all other clients.
2.) Outlook does not support background image, so you will need to use VML to mimic this for outook - best place for that is http://backgrounds.cm/. It will do most of the work for you.
3.) Gmail does not read stylesheets, so the code will likely lead to a deformed version when displayed on gmail app - this is something you will need to work on from a design/layout perspective
4.) Margin-left and most of the code on the overlay content needs work for email HTML as it is not supported on many email clients.
See below code that is built from Mayhem's answer with some tweaks and the Outlook conditional VML added in.
<table width="100%" cellpadding="0" cellspacing="0" border="0" style="width:100%; max-width:960px; margin:0 auto;">
<tr>
<td background="http://placehold.it/960x550" width="960" height="550" style="background-size:auto 100%; background-image:url('http://placehold.it/960x550');">
<!--[if gte mso 9]>
<v:rect xmlns:v="urn:schemas-microsoft-com:vml" fill="true" stroke="false" style="width:960px;height:550px;">
<v:fill type="tile" src="http://placehold.it/960x550" />
<v:textbox inset="0,0,0,0">
<![endif]-->
<div>
<img src="http://placehold.it/100/09f/fff.png" style="margin-left:35%;" />
<h1 style="text-align:center;"> Some text on top of bg-image inside a td</h1>
</div>
<!--[if gte mso 9]>
</v:textbox>
</v:rect>
<![endif]-->
</td> </tr>
</table>
simply change
<img src="http://source/logo.png" style="margin-left:35%;" />
to
<img src="http://source/logo.png" style="width:100%;margin-left:35%;" />
A more correct solution is to change
<img src="http://placehold.it/100/09f/fff.png" style="margin-left:35%;" />
to
<img src="http://placehold.it/100/09f/fff.png" style="width:65%;margin-left:35%;" />