Extravision Blogsblog

Recent Posts



Targeting devices using media queries in your email

September 2, 2016

With many different sized mobile phones, come different screen sizes so on occasions we have to target specific devices to make things work how they you’d expect.

We’d usually write a query to target all mobile devices, which looks something like:

<style type=”css/text”>

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

Styles go in here…




For most fluid or even responsive designs, it’s usually a case of using percentage based widths to adapt the email on mobile devices so using the above is sufficient. With more complex designs however, this might not work all the time…

The Phew Internet email below is a great example to illustrate this…


In this particular example we’ve used a background image, which the height and min-height need to be defined. With iPhones 4 to iPhone 6, the phone size are difference so it's easy understand why it's not working.

Here’s a list of media queries you can use to target specific devices:

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

All styles including Android


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

iPhone 4, 4s, 5 and 5s styles


@media only screen and (max-width: 375px) and (min-width: 375px){

iPhone 6 styles


@media only screen and (max-width: 414px) and (min-width: 414px){

iPhone 6 Plus styles



So it would look something like this if we applied the styles for each individual device…

Example fixed

There are constantly new phones being introduced so it's important to adapt your emails the best you can so they look perfect on any device.

Posted by Andrew Chau
Email Design, General, Technology

No comments

Comments are closed.

From the Blog

How to craft the perfect re-engagement email: Topshop example

In an ideal world, everyone on your list would be eagerly awaiting your email. They…

Jenni Malley
June 1, 2017

How To Get Your Perfect Email Template

If you send email campaigns then you probably use a template. Not every email campaign…

Jenni Malley
May 12, 2017

Latest Tweets

Get in touch

MediaCity UK
M50 2AB
Find us on Google maps

Main: +44 (0) 161 817 2929
Support: +44 (0) 161 817 2930
Email: [email protected]


Facebook IconTwitter IconVisit Our BlogVisit Our BlogVisit Our Blog