CODEWITHSUNDEEP
htmlresponsive-designoutlookmedia-querieshtml-email
user3776116
user3776116

Reputation: 1

Responsive email not doing its thing in Outlook

I am having some trouble with getting a responsive email template to render properly in Outlook (desktop)... surprise surprise.

I want the right hand column to sit underneath the left hand column when viewed on mobile (achieved). Yet when view in Outlook, it shuvs the right hand column half way along and about 50px down the page.

Here is the html and css for you;

    @media only screen and (max-device-width: 480px) {

    table[class="container"] {
        width:300px !important;
    }

    td[class="header_body"] {
        text-align:center !important;
        padding-bottom:10px !important;
    }

    td[class="header_left_col"] {
        text-align:center !important;
        padding-bottom:10px !important;
    }   

    }

<!-- START OF HEADER-->

<table cellpadding="0" cellspacing="0" border="0" width="600" align="center" class="container" bgcolor="#ffffff"><tr><td>

<table cellpadding="0" cellspacing="0" border="0" width="300" align="left" class="header_left_col"><tr><td>LOGO</td></tr></table>

<table cellpadding="0" cellspacing="0" border="0" width="300" class="header_right_col"><tr><td align="right">Body content here</td></tr></table>

</td></tr></table>

Thanks in advance.

Upvotes: 0

Views: 1726

Answers (4)

John
John

Reputation: 12193

For responsive emails, the best/most common method is using a display:block; toggle on your <td> elements. Here is a basic example:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8"><title></title>
  <style type="text/css">
    @media only screen and (max-width: 600px) { .switch { width:100%; display:block; } }
  </style>
</head>
<body>

  <table width="100%" border="0" cellpadding="0" cellspacing="0">
    <tr>
      <td class="switch" width="50%">
         <img alt="" src="http://placehold.it/150x150" width="100%" style="margin: 0; border: 0; padding: 0; display: block;">
      </td>
      <td class="switch" width="50%" valign="top" style="padding:30px;">
        Text here...
      </td>
    </tr>
  </table>

</body></html>

Upvotes: 0

lindsay
lindsay

Reputation: 972

I've had very little success with CSS working outside of the inline deceleration on desktop. Apple mail and Gmail are going to be your target audience for mobile and they are quite supportive in terms of responsive design. For more details you can read more on campaign monitor.

Upvotes: 1

Andrei Volgin
Andrei Volgin

Reputation: 41089

Support for CSS is very limited in Outlook and in many other email clients. Outlook does not support media queries at all - and many other clients do not support them either.

Here is a comprehensive guide including some popular clients:

The Ultimate Guide to CSS

Upvotes: 1

Brian
Brian

Reputation: 7146

In short, CSS works different in email clients. Much of it doesn't work at all and it's like we're back in the old says using table based designs. Mail Chimp has a good reference on the subject:

http://kb.mailchimp.com/article/how-to-code-html-emails/

Upvotes: 0

Related Questions