Extravision Blogsblog

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

5 things you should stop doing right now in your email marketing

It’s easy to get stuck in a rut with your email marketing campaigns. You can…

Jenni Malley
October 26, 2016

Unsubscribe from mailing list feature in iOS 10

Earlier this month Apple released the latest version of the iPhone operating system, iOS 10.…

Simon Hill
September 26, 2016

Latest Tweets

Facebook IconTwitter IconVisit Our BlogVisit Our BlogVisit Our Blog