Media Queries to fix email displaying odd on Android OS | Community
Skip to main content
R
Ray_Swanson1
Level 2
June 18, 2018
Question

Media Queries to fix email displaying odd on Android OS

  • June 18, 2018
  • 3 replies
  • 2613 views

So I just found out that some of my corporate emails are displaying odd on Android devices (multi column layouts all pushed to the left, with tons of whitespace on the right), but the emails check out fine on iOS devices, Gmeail, Outlook, etc.From what I'm seeing is that I could use media queries to help solve this, but I can't find any resources on how to use these. Does anyone have any experience or recommendations on where I can find information on how to do this/solve this?

This post is no longer active and is closed to new replies. Need help? Start a new post to ask your question.

3 replies

Casey_Grimes2
Casey_Grimes2
Level 10
June 18, 2018

This is extremely hard to diagnose without code, but I would take a look at that banner, which seems to be going to 100% width instead of scaling to the viewport. Additionally, Android has some specific things to keep in mind when designing for mobile--some of the tactics that work on iOS won't work for Android.

Also, if I had to be completely honest, you probably need to rework this design so that text is actually readable on mobile devices (most likely with stacking the image, then text), because although it fits the screen, it's super difficult to read.

Grégoire_Miche2
Grégoire_Miche2
Level 10
June 18, 2018

Be aware that media queries are only supported by the most recent versions of android, which for the moment have a minor market share. Unlike IOS, Android users tend not to upgrade rapidly on the most recent versions of Android (mostly because the phone vendors have developed some additional layers on top of Android and do not support the Android upgrades).

-Greg

Dave_Roberts
Dave_Roberts
Level 10
June 20, 2018

Hey Ray-

Just to throw an idea out there, I like to think about this the other way around and work from the "least capable" devices (those that support the least modern code) and up, using media queries instead to set the desktop layout instead of the mobile stacking. This follows a mobile-first approach to email and can help to layer the code for different ESPs -- ex. Some will read the inline styles only, others (which can) will read the <style> and further yet, some will read the media queries in the style element.

Terms & ConditionsAccessibility statement

Loading footer...