@media Queries

Create Basic Responsive Newsletter Templates with @media Queries

warning  All samples and many more templates are included in MailList Controller.

Template Tutorial   Download Free Version

 

 

Basic Responsive Templates

Our basic template contains a body wrapper background table (100%) and a container (600px).
Please take a look at "How to create a HTML Email Newsletter Template" for details.

 

...
<head>
...
<style type="text/css">
...
/* ADD MEDIA QUERIES HERE */
...
</style>
</head>

...
<!-- background table -->
<table id="bgtable" align="center" border="0" cellpadding="0" cellspacing="0" height="100%" width="100%">
    <tr>
        <td align="center" valign="top">
            <!-- container 600px -->
            <table border="0" cellpadding="0" cellspacing="0" class="container" width="600" style="...">
                <tr>
                    <td align="left" style="padding: 16px;">
                        <p>Hello World!</p>
                        <p>Hello World!</p>
                        <p>Hello World!</p>
                    </td>

                </tr>
            </table>
            <!-- container 600px -->
        </td>
    </tr>
</table>
<!-- background table -->
...

Responsive Sample: 100% - max. 600px

The template should have a width of 100% to fill the available space (for mobiles), but should not extend 600px (on desktop and tablets).
We can achieve this by using 2 media queries:

  • The first sets the width to 100% for all devices with a minimum display width of 20px (all).
  • The second limits the width to 600px for all devices with a minimum display width of 600px.

 

/* ADD MEDIA QUERIES TO YOUR STYLES! */

@media (min-width:20px)
{
table[class="container"] {width: 100%;}
}

@media (min-width:600px)
{
table[class="container"] {width: 600px;}
}

Responsive Sample: 320px - 480px - 600px

This sample works same as the first sample, but the template has always a fixed width, depending on the client (device).

  • Mobiles (Portrait): 320px (min-width:20px)
  • Mobiles (Landscape): 480px (min-width:480px)
  • Tablets and Desktop: 600px (min-width:600px)

 

/* ADD MEDIA QUERIES TO YOUR STYLES! */

@media (min-width:20px)
{
table[class="container"] {width: 320px;}
}

@media (min-width:480px)
{
table[class="container"] {width: 480px;}
}

@media (min-width:600px)
{
table[class="container"] {width: 600px;}
}

Auto-sizing Images

It's a bit tricky to specify the image dimension when the table cells have no static width.
The solution is to specify the width in percent, e.g. 50%. It's recommended to include the image the largest size (in our sample 600px)

  • Cell: 480px * 50% = image resized to 240px (width) minus padding
  • Cell: 600px * 50% = original image size of 300px (width) minus padding
  • Use e.g. 50% if the image should only have half of the cell width, etc.
  • Don't try to overlay an image with text!
    Major web mail and desktop clients don't support CSS positioning, so you cannot overlay an image with a text element.
  • Use style="width:100%;" if the image should fill the whole parent (table cell).

 

<img src="image.png" alt="alternate text" border="0" style="width:50%; height:auto;">

 

It's recommended to set additional styles for <img>.
See "How to create a HTML Email Newsletter Template" (Reset CSS Styles) for details.

 

Template Tutorial