Responsive (stacking) issues in Android 4.2 native app

Hi Folks

We've been using the same method to stack columns on mobile for a while now. Don't think it's anything unusual, and our Litmus tests have always come back fine across the board. Recently a client with an Android device (S4 mini running 4.2) complained that the layout was broken. The media queries were firing just fine, and the non-stacking parts of the email were behaving as intended, but the 3 columns we were trying to stack stubbornly refused to do so.

Is anybody else having a similar issue? Any insight would be gratefully received!

Thanks in advance folks :)

The CSS:

@media only screen and (max-width: 660px) {
*[class].fl{float:left !important;}
*[class].wr{display:block !important;}
*[class].width320{width:320px !important;}
*[class].width300{width:300px !important;}
*[class].height20{height:20px !important;}

<table width="600" class="width300" border="0" cellspacing="0" cellpadding="0" align="center">
        <td width="187" height="60" class="wr fl width300" bgcolor="#000000" style="background-color:#000000;"></td>
        <td width="20" class="wr fl width300 height20" style="font-size:1px; line-height:1px">&nbsp;</td>
        <td width="186" height="60" class="wr fl width300" bgcolor="#000000" style="background-color:#000000;"></td>
        <td width="20" class="wr fl width300 height20" style="font-size:1px; line-height:1px">&nbsp;</td>
        <td width="187" height="60" class="wr fl width300" bgcolor="#000000" style="background-color:#000000;"></td>
Stig Stig, 4 years ago

Hey Bonpantalon,

Sorry you're having trouble getting this to work!

I wanted to first just double check which app this is happening in; We've seen a few reports lately of people having problems with email rendering on Samsung devices because the Samsung has replaced the native Android email client with an app of their own. Samsung's email client doesn't support media queries at all, unfortunately.

We've also seen the Gmail app mistaken for the native Android email app in the past.

You can tell these apart by looking at the icon at the top left. Here's an overview:

Are you seeing one of those icons in the affected client?

If not, could I ask you to post a screenshot of the problem you're seeing?

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

Hey Stig

You hero! You're absolutely right, the client was using the Samsung email app and calling it the native Android app.

Interestingly, the Samsung client doesn't seem to be ignoring media queries. I'd expect it to just be displaying the full-width desktop version but it seems to be attempting to display the mobile version and failing.

I created a simple demo responsive email and ran it through Litmus - all fine in the usual suspects: I then sent the same email to the client and this is what's happening in the Samsung app:

This is the same sort of outcome we were seeing with the 'real' campaigns, only with those the email looked even more broken because the cells contained text and images, which forced them to retain their intended dimensions, so the email as a whole was all over the place!

Have you come across this anywhere else?

Hugely appreciate your help, thank you very much indeed.

Alex I., 4 years ago

Hi Bonpantalon,

You could try stacking tables, rather than stacking TD's as you're doing now?

Bonpantalon Bonpantalon, 4 years ago

Hi Alex

Yes that's our fall-back option but we find (and I'd love to be corrected on this!) that when stacking tables by putting them side-by-side on desktop with 'align="left"' and then just shrinking the container on mobile to pop them into a column, we always have to set the total widths of the tables to be a bit less than the width of the desktop container to account for good old Outlook 07/10/13 adding padding.

Sure there's the workaround where you add a 1px border to the tables, set bg colours to each <td> and wrap your content in a <p style="mso-table-lspace:0;mso-table-rspace:0;"> tag, but that has its own drawbacks and makes certain types of layout un-do-able.

The approach we were using with stacking <td>s was super handy because we could get nice even column widths and gutters and relatively clean code. Only snag is that the Samsung client seems to not like it!

gilly259, 3 years ago

Hi everyone,

I have a theory that this Samung mail app is stripping out the Doctype of the email, which is why display:block no longer works on the <td>. When I remove the Doctype from a test responsive email, I get the same result in iOS environments. My cells don't stack.

I have not found an alternative way to stack the cells. This is very frustrating as it would be better if the desktop version displayed instead of this half and half responsive email.

See why 200,000 companies worldwide love Campaign Monitor.

From Australia to Zimbabwe, and everywhere in between, companies count on Campaign Monitor for email campaigns that boost the bottom line.

Get started for free