Ipad & Tablet Media Queries

Hi guys, i have gotten my emails to work well on iphone and android Smartphones but cant work out the correct queries for Tablets.

In the office i have a LG Gpad (Full HD) and someone else has an ipad air (Retina)

I want a media query to target Tablets what should i use? I think the desktop view is a bit too difficult when making a 2 column layout and the mobile view is too simple so im wanting to create a hybrid where the 2 columns turn into 1 column but the images dont go 100% width like the phone media query. I canr write the CSS no problem its just the actual Media Query.

For phones im using

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

paulw paulw, 2 years ago

Hey stoke1863,

Thanks for posting in the forums! It should be possible to target all iPads effectively using the standard media query set at 768 pixels, here is how that would look:

@media only screen 
and (min-device-width : 768px) 
and (max-device-width : 1024px)  {STYLES GO HERE}

With the LG GPad, this does get more complicated as the screen resolution overlaps with many desktops. Some tablets will report a lower resolution in which case the above query should work okay. I'm afraid we haven't been able to fully test the LG GPad yet and so it's possible that the default mail app doesn't render media queries at all.

If you are still running into trouble, please feel free to drop an email to support and we can help out!


The Campaign Monitor Blog – HTML email smarts to go with your good looks.

Join 200,000 companies around the world that use Campaign Monitor to run email marketing campaigns that deliver results for their business.

Get started for free
1-888-533-8098