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

Line height issues in Outlook

Line height is not always consistent when viewing emails in Outlook. This is especially true…

Andrew Chau
March 1, 2017

Are you making the most of your ESP?

If you use an Email Service Provider, you now get some pretty powerful technology alongside…

Jenni Malley
February 10, 2017

Latest Tweets

Facebook IconTwitter IconVisit Our BlogVisit Our BlogVisit Our Blog