Essential responsive email code: the Media query

Straight from our multi-coloured corner of the office, we of the Design team at NewZapp are keen to share some titbits of HTML and CSS that we have so far been keeping safely in our burrows. This is actual code that can be used to create your very own responsive emails!

And you can rest assured dear people, for this is the very same code that is used day-to-day by our good selves to craft the multitude of bespoke email templates sent forth from NewZapp acres to brighten the world. As such, they have been been rigorously tested to display correctly in all of the most popular email readers and devices.

Without further ado, first up for your delectation ...

... the magical Media query.

Essential responsive email code: the Media query

A brief note about @media declaration and nested curly braces

Using a media query in your stylesheet means that you will likely be nesting multiple sets of curly-braced style declarations within another.

Do not be alarmed. This is all fine - in fact, if you're using an HTML editor such as Adobe Dreamweaver, you will probably find the @media{ ... } declaration will be given it's own colour anyway to distinguish it from the usual class and id declarations e.g.

  table td {width:600px;} //CSS as usual
  @media screen and (max-device-width: 479px), screen and (max-width: 479px)
    table td {width:100%;} //woo! nested curly braces

Splendid stuff!

Want more? Then step this way for our other blogs in this series:

 Fabulously fluid table widths

Fiendishly fluid content alignment

Undeniably useful element modifiers