Whilst trying to create a responsive email which looks good on retina display devices, I have discovered that Outlook doesn't respect specified criteria for images and displays them as their source dimensions.
For a proof of concept (POC) I have created a banner image as 1200x400, so in emails it would be scaled to 600x200 and as 300x100 on mobile devices. Sounds good right?
Well, in Outlook it shows it as 1200px wide and there doesn't seem to be anything I can do about it. Here is the JSFiddle that results in the ghastly Outlook email:
http://jsfiddle.net/hirenshah/rdux8vkg/11/
HTML:
<body bgcolor="#C0C0C0">
<!--[if (mso)|(IE)]>
<table width="600" align="center" cellpadding="0" cellspacing="0" border="0">
<tr>
<td>
<![endif]-->
<table class="container" width="100%" cellpadding="0" cellspacing="0" style="max-width: 600px; background-color: white; margin-left: auto; margin-right: auto;">
<tr>
<td>
<!-- Header Table Start -->
<table width="100%" cellpadding="0" cellspacing="0">
<tr>
<td class="alignrightonmobile">
<img src="http://hirenshah.co.uk/poc/logo.png" width="100px" height="75px" />
</td>
</tr>
</table>
<table width="100%" cellpadding="0" cellspacing="0">
<tr>
<td>Quote Reference ABC123456</td>
</tr>
</table>
<table width="100%" cellpadding="0" cellspacing="0">
<tr>
<td>
<img class ="banner" src="http://hirenshah.co.uk/poc/banner.png" style="width:auto; max-width:100%;height:auto"/>
</td>
</tr>
</table>
<!-- Header Table End -->
<!-- Body Table Start -->
<!-- Body Table End -->
</td>
</tr>
</table>
<!--[if (mso)|(IE)]>
</td>
</tr>
</table>
<![endif]-->
</body>
CSS:
#media screen and (min-width: 601px) {
.container {
width:600px !important;
}
.headercolumnright {
text-align:right !important;
}
* {
font-family: Verdana;
color:blue !important;}
.alignrightonmobile {text-align:right !important;}
}
.headercolumnleft {
width: 300px;
display: block;
text-align:left;
float: left;
font-size:12pt;
}
.headercolumnright {
width: 300px;
display: block;
text-align:left;
float: right;
font-size:12pt;
}
div {
outline: 1px solid red;
}
* {
font-family: Verdana;
color:red;}
.alignrightonmobile {text-align:left;}
img.resize {
width:auto;
max-width:100%;
height:auto;
}
Outlook has some of the most limited CSS support out of all the popular clients: https://www.campaignmonitor.com/css/
With that in mind it's easier to build your email to work with Outlook and improve it for all other clients with CSS.
With regards to solving your specific problem, first of all the image you use in the img tag should be optimized for Outlook at 600px wide.
We can then use CSS to set a background-image on the td that contains your image so that you can load in the correct image for those devices that support it, you'll also want to use CSS to hide the image within your td tag on those devices using your media rules.
Related
I'm hoping someone can help me with this. I have tried everything I know and read all the articles I could find. Nothing has worked
Basically, there is what seems to be a neon blue background color showing up ONLY on Gmail in the <td> containing the header image.
Screenshot (with image missing):
Screenshot (with image showing neon background):
Table code:
<table border="0" cellspacing="0" class="body-wrap" bgcolor="#FFFFFF" style="max-width: 600px">
<tbody>
<tr>
<td align="center" class="container" bgcolor="=FFFFFF" style="padding: 0px; margin: 0px; line-height:10px; font-size:6px">
<div class="container1">
<a href="http://www.rolla.com" style="text-decoration: none; border: none"><img src="https://rolla.igamingcloud.com/Images/Emails/MailSystem/Upload/rolla_system_header.gif" align=“absbottom” width="100%" style="display:block; max-height: 172px; max-width: 600px; border:none; padding: 0px; margin 0px" border="0" alt="Rolla Casino Logo"
/></a>
</div>
</td>
</tr>
</tbody>
</table>
I have specified background colour white in the table and td. I have also added style attributes to the border to the href and img tags. None of these have worked.
The classes container and container1 both contain:
border-width:0 none;
background: #ffffff;
text-decoration: none;
text-decoration-color: #ffffff;
Even when I unlinked the header image and sent another test, the blue was there!
I think you added an equal rather than a hash in background color decoration for the td. You have bgcolor="=FFFFFF" instead of bgcolor="#FFFFFF". Below is the fixed code:
<table border="0" cellspacing="0" class="body-wrap" bgcolor="#FFFFFF" style="max-width: 600px">
<tbody>
<tr>
<td align="center" class="container" bgcolor="#FFFFFF" style="padding: 0px; margin: 0px; line-height:10px; font-size:6px">
<div class="container1">
<a href="http://www.rolla.com" style="text-decoration: none; border: none"><img src="https://rolla.igamingcloud.com/Images/Emails/MailSystem/Upload/rolla_system_header.gif" align=“absbottom” width="100%" style="display:block; max-height: 172px; max-width: 600px; border:none; padding: 0px; margin 0px" border="0" alt="Rolla Casino Logo"
/></a>
</div>
</td>
</tr>
</tbody>
</table>
Cheers
Closed. This question needs to be more focused. It is not currently accepting answers.
Want to improve this question? Update the question so it focuses on one problem only by editing this post.
Closed 5 years ago.
Improve this question
At the moment I have one <table> for the whole page, and one <table> for the header. In the header table there are two columns filled with two simple images. See below for the first result:
These columns are responsive, but what I would like to do is to make the header a maximum width of 640 pixels, and a minimum width of 640 pixels. Assume that the images are just an example, because the other images I want to use are smaller, and the fact is that there is no space between these images. I could add a padding, but the responsiveness doesn't work properly anymore.
And the second is when I make the window smaller, the image on the right side goes under the first image which is good (see below for the responsive result). But this needs to happen already when the screen size is below 640 pixels and not just when the window touches the image on the right side.
Responsive result:
What do I need to do to make the header a minimum and maximum of 640 pixels, and to make it possible the responsive starts when the window is below 640 pixels?
I use the following code:
<!-- WHOLE PAGE -->
<table width="100%" cellspacing="0" cellpadding="0" border="0" style="background-color: #f3f3f3;">
<tr>
<td style="text-align: center; vertical-align: top;">
<!-- HEADER -->
<table align="center" cellspacing="0" cellpadding="0" border="0" style="background-color: #ffffff; ">
<tr>
<!-- Logo -->
<td align="left" style="display: inline-block; padding: 5px;">
<a href="#">
<img width="200px" border="0" src="https://placeholdit.imgix.net/~text?txtsize=33&txt=350%C3%97150&w=350&h=150" style="display: block;" />
</a>
</td>
<!-- Logo -->
<td align="right" style="display: inline-block; padding: 5px;">
<a href="#">
<img width="200px" border="0" src="https://placeholdit.imgix.net/~text?txtsize=33&txt=350%C3%97150&w=350&h=150" style="display: block;" />
</a>
</td>
</tr>
</table>
</td>
</tr>
</table>
Use below media query to your CSS file. It will take your td to width 100% below 640 devices.
Note: I have mentioned two class in header table and logo td.
.logo:first-child
{
background: red;
}
.logo:last-child
{
background: blue;
}
img{
width:100%;
}
#media screen and (max-width: 640px) {
.header{
width:100%;
}
.logo{
width:100%;
}
}
<table width="100%" cellspacing="0" cellpadding="0" border="0" style="background-color: #f3f3f3;">
<tr>
<td style="text-align: center; vertical-align: top;">
<!-- HEADER -->
<table align="center" cellspacing="0" cellpadding="0" border="0" style="background-color: #ffffff; " class="header">
<tr>
<!-- Logo -->
<td align="left" style="display: inline-block; padding: 5px;" class="logo">
<a href="#">
<img width="200px" border="0" src="https://placeholdit.imgix.net/~text?txtsize=33&txt=350%C3%97150&w=350&h=150" style="display: block;" />
</a>
</td>
<!-- Logo -->
<td align="right" style="display: inline-block; padding: 5px;" class="logo">
<a href="#">
<img width="200px" border="0" src="https://placeholdit.imgix.net/~text?txtsize=33&txt=350%C3%97150&w=350&h=150" style="display: block;" />
</a>
</td>
</tr>
</table>
</td>
</tr>
</table>
See jsfiddle for responsive -
https://jsfiddle.net/vaishuk/qhqgrgnc/1/
Hope this helps :)
I think you are missing Media Query.
Setting the display to inline-block makes the div's align side by side to each other.
If you remove the inline-block on the td(s) :<td align="left" style="display: inline-block; padding: 5px;">.
inside the second table and add a media query after giving it a css class:
` #media (max-width:640px){
td.secondtable-cell{
display: block;
}
}`
This should work as expected. Note, you might need to add marigins/padding for space.
Please do not use tables. Tables are not viable to be responsive and people now a days use div to actually make such containers possible.
CSS:
#page{
width: 1280px;
}
#container1,#container2{
disply:inline-block;
width:49%;
}
HTML:
<div id="page">
<div id="container1">Container2</div>
<div id="container2">Container1</div>
</div>
I'm struggling with creating an email template "from scratch" (that I then copy paste in mailchimp as their CMS is not appropriate to what I have to do).
The general email looks good except a
text - image with width 50% that has to become:
image
text
With width: 100%
.responsive-width {
width: 50%;
}
#media only screen and (max-width: 480px) {
.responsive-width {
width: 100% !important;
min-width: 100% !important;
}
}
<td valign="top" style="padding: 0!important;">
<table class="responsive-width" align="right" border="0" cellpadding="0" cellspacing="0">
<tr>
<td class="align-mid" style="padding: 0!important;text-align: center !important;">
<img src="myimg-url.jpg" alt="newsletter photo cover">
</td>
</tr>
</table>
<table class="responsive-width" align="left" border="0" cellpadding="0" cellspacing="0">
<tr>
<td style="padding: 0!important;">
<h2 class="no-top">Title!</h2>
<div class="grey other-font">
TEXT
<br>
<a class="btn align-mid button-orange read-more left" href="">READ MORE</a>
</div>
</td>
</tr>
</table>
</td>
I removed the inline-style for more visibility.
The media query is in the <head>, within a <style> element.
But I heard that it's not supported by gmail.
How am I supposed to make it responsive then?
You can do it all inline, like this.
<img src="myimg-url.jpg" width="480" alt="..." border="0" style="width:100%; max-width:480px;">
Then, this way you have a fully responsive image and can avoid some of those client inconsistencies.
Additionally, you could add a class and target that element like this;
img.thumbnail{
max-width:480px !important;
width: 100% !important;
}
I want to create a vertical meter element in html. I used the following css sheet
meter {
width: 1000px;
height: 10px;
transform: rotate(90deg);
}
This worked perfectly fine, but when I incorporated the meter into a table, the cell took on 1000px of width instead of 10px. How should I adjust my html or css to make the table's cell properly fit the meter? IE: I want the table cell to take on the rotated width and height of the meter.
The html:
<table width="100px" cellspacing="" cellpadding="0" border="">
<td><meter max="120" value="55.93" title="Test"></meter></td>
</table>
When I add a width to the table's td element as follows:
<table width="100px" cellspacing="" cellpadding="0" border="">
<td width="10"><meter max="120" value="55.93" title="Test"></meter></td>
</table>
no change occurs. Input is much appreciated.
EDIT:
I solved this problem by using the -moz-orient: vertical; line in my meter style. This meant that the height and width were not switched and thus I could extend the height as long as I wanted without stretching the page/table.
<!DOCTYPE html>
<html>
<head>
<style>
.customtd
{
overflow: hidden;
display: inline-block;
white-space: nowrap;
}
meter
{
width: 500px;
height: 10px;
transform: rotate(90deg);
}
</style>
</head>
<body>
<table width="100px" cellspacing="" cellpadding="0" border="">
<tr>
<td width="10px" class="customtd">
<meter max="120" value="55.93" title="Test"></meter>
</td>
</tr>
</table>
<table width="100px" cellspacing="" cellpadding="0" border="">
<tr>
<td>
<meter max="120" value="55.93" title="Test"></meter>
</td>
</tr>
</table>
</body>
</html>
I have a table with two columns. I want to center the right-most column with the page so the left column would hang off to the left.
<table width="960" border="0" cellpadding="0">
<tr>
<td width="100"><!--COLUMN TO HANG TO LEFT--></td>
<td><!--COLUMN TO BE CENTER WITH PAGE--></td>
</tr>
</table>
I'm assuming the solution will be CSS.
You are right - CSS is the way to go. Give the column an id or class that you can target and and in your CSS center it. Assuming your table width is where you want it, give it a width of your table subtracting the other column that is to the left.
Something like this:
HTML:
<table width="960" border="0" cellpadding="0">
<tr>
<td width="100"><!--COLUMN TO HANG TO LEFT--></td>
<td class="center"><!--COLUMN TO BE CENTER WITH PAGE--></td>
</tr>
</table>
CSS:
td.center {
text-align: center;
width: 860px;
}
Edit: Based on the comments below, here is a sample layout just using div's instead of a table
http://jsfiddle.net/willyrybone/8eR6G/
HTML:
<div id="page-wrap">
<div id="sidebar">
<p>this is some</p>
<p>sidebar content</p>
</div>
<div id="main-content">
<p>This is some</p>
<p>centered main content</p>
</div>
<div>
CSS:
#page-wrap {
width: 960px;
margin: auto;
}
#sidebar {
float:left;
width: 100px;
background: #eee;
}
#main-content {
text-align:center;
background:#bbb;
}
You'll have to wrap your table in a div, and center that:
<div style="width:1060px; margin: auto">
<table width="960" border="0" cellpadding="0">
<tr>
<td width="100">COLUMN TO HANG TO LEFT</td>
<td style="background: #ccc">COLUMN TO BE CENTER WITH PAGE</td>
</tr>
</table>
</div>
http://jsfiddle.net/9HgpM/embedded/result/