Responsive HTML mail template without @media query?

Navigation
2

I'm trying to create an email template with a layout that shows in the same section three columns on computers and one on mobile - I can not use @media queries since I need it to look good even in outlook.

So far I have been doing this, but the only thing I have achieved is to stack them vertically ... 

<table class="responsiveContainer" cellpadding="0" cellspacing="0" align="center" width="640" height="205" style="max-width: 640px;">
  <tr>
    <td>
      <table class="city" cellpadding="0" cellspacing="0" width="192" height="205" align="center" bgcolor="#2A303F" style="border-bottom:2px; border-bottom-color:#EBC862; border-bottom-style:solid;">
        <tr>
          <td class="cityImage" width="192" align="center"><img src="#" alt=""/></td>
        </tr>
        <tr>
          <td class="cityTitle" width="192" align="center" style="color:#ffffff; font-size:20px; font-weight:400;">Hawai</td>
        </tr>
        <tr>
          <td class="buttonContainer" width="192" height="50" align="center" style="text-align:center;"><a class="button" href="http://api.getblueshift.com/track?uid=5aae3e07-c1c8-4feb-8e30-2b7c5ead5b2b&amp;mid=36d9036a-1c66-42c9-9aca-3b88ce2d66d0&amp;a=click&amp;redir=%23" style="background-color: #EBC862;text-transform: uppercase;text-decoration: none;color: #ffffff;height: 40px;width: 110px;padding-top: 9px;padding-bottom: 9px;padding-right: 9px;padding-left: 9px;text-align: center;border-radius: 3px;font-family: 'Gotham Narrow SSm A', 'Gotham Narrow SSm B', 'Roboto', sans-serif;font-size: 10pt;font-weight: 500;">View Suites</a></td>
        </tr>
      </table>
      <table class="city" cellpadding="0" cellspacing="0" width="192" height="205" align="center" bgcolor="#2A303F" style="border-bottom:2px; border-bottom-color:#EBC862; border-bottom-style:solid;">
        <tr>
          <td class="cityImage" width="192" align="center"><img src="#" alt=""/></td>
        </tr>
        <tr>
          <td class="cityTitle" width="192" align="center" style="color:#ffffff; font-size:20px; font-weight:400;">Hawai</td>
        </tr>
        <tr>
          <td class="buttonContainer" width="192" height="50" align="center" style="text-align:center;"><a class="button" href="http://api.getblueshift.com/track?uid=5aae3e07-c1c8-4feb-8e30-2b7c5ead5b2b&amp;mid=36d9036a-1c66-42c9-9aca-3b88ce2d66d0&amp;a=click&amp;redir=%23" style="background-color: #EBC862;text-transform: uppercase;text-decoration: none;color: #ffffff;height: 40px;width: 110px;padding-top: 9px;padding-bottom: 9px;padding-right: 9px;padding-left: 9px;text-align: center;border-radius: 3px;font-family: 'Gotham Narrow SSm A', 'Gotham Narrow SSm B', 'Roboto', sans-serif;font-size: 10pt;font-weight: 500;">View Suites</a></td>
        </tr>
      </table>
      <table class="city" cellpadding="0" cellspacing="0" width="192" height="205" align="center" bgcolor="#2A303F" style="border-bottom:2px; border-bottom-color:#EBC862; border-bottom-style:solid;">
        <tr>
          <td class="cityImage" width="192" align="center"><img src="#" alt=""/></td>
        </tr>
        <tr>
          <td class="cityTitle" width="192" align="center" style="color:#ffffff; font-size:20px; font-weight:400;">Hawai</td>
        </tr>
        <tr>
          <td class="buttonContainer" width="192" height="50" align="center" style="text-align:center;"><a class="button" href="http://api.getblueshift.com/track?uid=5aae3e07-c1c8-4feb-8e30-2b7c5ead5b2b&amp;mid=36d9036a-1c66-42c9-9aca-3b88ce2d66d0&amp;a=click&amp;redir=%23" style="background-color: #EBC862;text-transform: uppercase;text-decoration: none;color: #ffffff;height: 40px;width: 110px;padding-top: 9px;padding-bottom: 9px;padding-right: 9px;padding-left: 9px;text-align: center;border-radius: 3px;font-family: 'Gotham Narrow SSm A', 'Gotham Narrow SSm B', 'Roboto', sans-serif;font-size: 10pt;font-weight: 500;">View Suites</a></td>
        </tr>
      </table>
    </td>
  </tr>
</table>
    
asked by fvickyna 29.09.2017 в 04:47
source

1 answer

0

You have created a table, but you have not assigned styles to it. On the other hand, a template for mail is still a web document and as such should start it like a web page, example: 

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
 <head>
  <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
  <title>Demystifying Email Design</title>
  <meta name="viewport" content="width=device-width, initial-scale=1.0"/>
  <style type="text/css">
        body {margin: 0; padding: 0; min-width: 100%!important;}
        table {width: 100%; max-width: 600px;} 
        </style>
</head>
<body>
    <table class="responsiveContainer" cellpadding="0" cellspacing="0" align="center" width="640" height="205" style="max-width: 640px;">
  <tr>
    <td>
      <table class="city" cellpadding="0" cellspacing="0" width="192" height="205" align="center" bgcolor="#2A303F" style="border-bottom:2px; border-bottom-color:#EBC862; border-bottom-style:solid;">
        <tr>
          <td class="cityImage" width="192" align="center"><img src="#" alt=""/></td>
        </tr>
        <tr>
          <td class="cityTitle" width="192" align="center" style="color:#ffffff; font-size:20px; font-weight:400;">Hawai</td>
        </tr>
        <tr>
          <td class="buttonContainer" width="192" height="50" align="center" style="text-align:center;"><a class="button" href="http://api.getblueshift.com/track?uid=5aae3e07-c1c8-4feb-8e30-2b7c5ead5b2b&amp;mid=36d9036a-1c66-42c9-9aca-3b88ce2d66d0&amp;a=click&amp;redir=%23" style="background-color: #EBC862;text-transform: uppercase;text-decoration: none;color: #ffffff;height: 40px;width: 110px;padding-top: 9px;padding-bottom: 9px;padding-right: 9px;padding-left: 9px;text-align: center;border-radius: 3px;font-family: 'Gotham Narrow SSm A', 'Gotham Narrow SSm B', 'Roboto', sans-serif;font-size: 10pt;font-weight: 500;">View Suites</a></td>
        </tr>
      </table>
      <table class="city" cellpadding="0" cellspacing="0" width="192" height="205" align="center" bgcolor="#2A303F" style="border-bottom:2px; border-bottom-color:#EBC862; border-bottom-style:solid;">
        <tr>
          <td class="cityImage" width="192" align="center"><img src="#" alt=""/></td>
        </tr>
        <tr>
          <td class="cityTitle" width="192" align="center" style="color:#ffffff; font-size:20px; font-weight:400;">Hawai</td>
        </tr>
        <tr>
          <td class="buttonContainer" width="192" height="50" align="center" style="text-align:center;"><a class="button" href="http://api.getblueshift.com/track?uid=5aae3e07-c1c8-4feb-8e30-2b7c5ead5b2b&amp;mid=36d9036a-1c66-42c9-9aca-3b88ce2d66d0&amp;a=click&amp;redir=%23" style="background-color: #EBC862;text-transform: uppercase;text-decoration: none;color: #ffffff;height: 40px;width: 110px;padding-top: 9px;padding-bottom: 9px;padding-right: 9px;padding-left: 9px;text-align: center;border-radius: 3px;font-family: 'Gotham Narrow SSm A', 'Gotham Narrow SSm B', 'Roboto', sans-serif;font-size: 10pt;font-weight: 500;">View Suites</a></td>
        </tr>
      </table>
      <table class="city" cellpadding="0" cellspacing="0" width="192" height="205" align="center" bgcolor="#2A303F" style="border-bottom:2px; border-bottom-color:#EBC862; border-bottom-style:solid;">
        <tr>
          <td class="cityImage" width="192" align="center"><img src="#" alt=""/></td>
        </tr>
        <tr>
          <td class="cityTitle" width="192" align="center" style="color:#ffffff; font-size:20px; font-weight:400;">Hawai</td>
        </tr>
        <tr>
          <td class="buttonContainer" width="192" height="50" align="center" style="text-align:center;"><a class="button" href="http://api.getblueshift.com/track?uid=5aae3e07-c1c8-4feb-8e30-2b7c5ead5b2b&amp;mid=36d9036a-1c66-42c9-9aca-3b88ce2d66d0&amp;a=click&amp;redir=%23" style="background-color: #EBC862;text-transform: uppercase;text-decoration: none;color: #ffffff;height: 40px;width: 110px;padding-top: 9px;padding-bottom: 9px;padding-right: 9px;padding-left: 9px;text-align: center;border-radius: 3px;font-family: 'Gotham Narrow SSm A', 'Gotham Narrow SSm B', 'Roboto', sans-serif;font-size: 10pt;font-weight: 500;">View Suites</a></td>
        </tr>
      </table>
    </td>
  </tr>
</table>
</body>
</html>
    
answered by 29.09.2017 в 08:40
How to generate report in Jasper if the WHERE condition is not met Selects nested with Django and AJAX