Media Query not working on Samsung Galaxy S4?

Hi,

I have been doing a responsive emails for sometime now. I have faced a problem a few days ago where media queries doesnt seem to work for S4.

@media only screen and (max-width : 480px)

I have also tried 640px, 768px as well as setting those as max-device-width but none of them work. Anyone can help me on this please?

Cheers

roshodgekiss roshodgekiss, 3 years ago

Hi there Syfer - mind me asking, which email client are you using? Not all support media queries, I'm sorry to say.


Get in touch with us on Twitter: http://twitter.com/campaignmonitor
We're also on Facebook: http://facebook.com/campaignmonitor
Syfer, 3 years ago

Hi roshodgekiss,

I am using the generic email client in S4. I understand the support for media queries is really limited and only on generic email clients.

Cheers

zerocents zerocents, 3 years ago

I don't have an S4 to test on, but you should consider that the device resolution is 1920x1080px and mix in a media query that targets dpi instead. As far as I know max-device-width does not work on any version of android.

The following example should work according to bjango:

@media screen and (-webkit-min-device-pixel-ratio: 3.0) and (max-width: 1080px) {
    //galaxy S4
}
@media screen and (max-width: 480px) {
   //most other phones
}

You should be able to combine these two media queries to get the effect you want.

@media screen and (-webkit-min-device-pixel-ratio: 3.0) and (max-width: 1080px), screen and (max-width: 480px) {
    //most phones including Galaxy S4
}

You'll just have to experiment to see what works best.


Michael Muscat
Syfer, 3 years ago

Hi zerocents,

I have tried it on multiple devices and the responsive code doesnt work. The device reads it but doesnt render. Here is a snippet of one class i am using on the email.

@media screen and (-webkit-min-device-pixel-ratio: 3.0) and (max-width: 1080px), screen and (max-device-width: 640px) {
td[class].wrapper{width:320px !important;}
}

The above css gets read on S4 but it still displays the desktop version on its generic email client.

Any idea why?

Cheers

Stig Stig, 3 years ago

Hey guys,

I just wanted to quickly mention that things like viewport meta tags can also affect this behavior.

So to look into this further, it would be great to see the full code of an example email which isn't working on Android Galaxy S4, as well as a screenshot.


The Campaign Monitor Blog – HTML email smarts to go with your good looks.
Syfer, 3 years ago

Hi Stig,

Here is the code that i am using at the moment.

Download html

Awaiting your response.

Cheers

Stig Stig, 3 years ago

Thanks Syfer!

Could I also ask you to post a screenshot of the issue?

I just became aware yesterday of Samsung replacing the default Android email client with their own which seems to lack support for @media queries and other basics. So it sounds like that might be the issue here, unfortunately.


The Campaign Monitor Blog – HTML email smarts to go with your good looks.
Syfer, 3 years ago

Hi Stig,

Here is the screenshots.

Screehshots

Please note the red lines was to see if media queries were being read, it was being read but it wasn't stacking anything.

Cheers

Stig Stig, 3 years ago

Thanks Syfer, that is indeed Samsung's own email client.

Since they've replaced the default Android email client with one that doesn't seem to support @media queries at all, it doesn't look like there's anything to be done about that until they improve the app, sorry.


The Campaign Monitor Blog – HTML email smarts to go with your good looks.
Syfer, 3 years ago

Thank you Stig,

Thank you for confirming my suspicion. So media queries are supported in older Samsungs.

Thank you for your time.

Cheers

kpaulsen, 3 years ago

It seems that some classes work in the S4 email app, while others do not. My style:

@media only screen and (max-width: 640px){
    *[class].hide{
        display: block;
        width: 0 !important;
        max-height: 0 !important;
        overflow: hidden !important;
        display: none;
    }
    /* ... */
    *[class].floatleft{ float: left !important; }
    *[class].width320{ width: 320px !important; }
    *[class].heightauto{ height: auto !important; }
}

For me, the .hide class works perfectly, but the .floatleft class does not work. The .width320 and .heightauto classes seem to work on images, but not on table cells.

I'm testing on a Samsung galaxy S4 Mini (which I expect has the same email app as the full size S4).

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