Extravision Blogsblog

Recent Posts

Categories

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…

}

</style>

 

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…

Example

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 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

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

Latest Tweets

Facebook IconTwitter IconVisit Our BlogVisit Our BlogVisit Our Blog