VD5
TD Display Block Not Working on Android
Hi folks,
I have a layout with 3 columns and I put display:block on the TDs class but on Android phones instead of one column I have 3 - the TDs are not spaning left to right. It appears display:block doesn't work.
How do you fix this?
When I have 2 columns I use 2 tables aligned left and right and I put display 100% on their class but I'm not sure what's the best solution for 3 or more columns layouts.
Thanks,
Vic
Try using <th>. It seems crazy, but that did it for me.
You can use
<th>but don't forget to addstyle="font-weight:normal;", normally that works wellThis helped me out more than you will ever know!
If you're using Android 4.4 (KitKat), then the reason is that support for display:block on TDs has (seemingly) been dropped. There are a few other methods to use (like display:table-header-group), but, for my money, three left-aligned tables are the most flexible way to achieve the same effect, which has the added benefit of the tables stacking in Gmail without the use of media queries.
This issue was being discussed in this thread: https://litmus.com/community/discussions/240-floating-columns
This works but what if you want to align the content in column 3 to the right on desktop view but left align the content in mobile view?
this what I ended up doing, using tables with align left instead of columns.
Does this work in outlook as well though?
Outlook the desktop client, or outlook the mobile app?
Just use TH instead of TD and it should work like a charm!
Confirming this issue is happening on a Nexus 7 as well with 4.4 in the native email app.
Which app are you having trouble with? The Gmail app doesn't support media query, so your emails will not be responsive.
no, it's not Gmail app, it's the native email.
Strange. The only reason I can think of is not having a doctype. Webkit will not render
tdas block elements if the document is missing a doctype.I always use doctype
TL;DR: The doctype gets stripped out.
The native email app used in Android 4.4 strips out the doctype which is why "display:block" isn't being recognized on <td>s. Using "display:block" and <th>s like other people have suggested will work, but I've encountered a few minor issues when using <th> (ex: the dir=ltr/rtl trick to get the right column to appear above the left column when stacking won't work on <th>, and align/valign needs to be specified as inline CSS as the attributes are ignored in Yahoo webmail), so the safest bet is to use tables and align="left" and align="right." To get them to stack for mobile you set the float CSS property to none.
there's a split in the native android client these days - the latest Samsung devices (S4+, and older ones with Kitkat) seem to have their own version, which has support broadly consistent with that of the Gmail app (i.e. a pain)
D'oh... That's a great way to add to the inconsistencies of email.
Have you also added in the media query a width of 100%?
that wasn't working either. It seems there is no fix as we speak so I will use tables instead of columns. This works pretty well so far.
I think u need to have it inline-block to be "fluid" other wise it will not work and the very first <td> hase to be align="center"
I am not sure how your template is looking but for me it looks like this and tested in litmus works fine =)