Cannot override display property in HTML email

Question

I have a fairly basic HTML template which is responsive as well. It works mostly as expected except when it goes responsive, I am making the 'td' full width using a class as follows:

@media only screen and (max-width: 480px){
            .templateColumnContainer{
                display:block !important;
                width:100% !important;
            }   
        }

This works as expected when I test in web browsers even in the device mode using devtools but on the actual device it simply won't override the default display property of 'table-cell' even when using !important flag. I have attached a screenshot to show the behaviour. Have I come across a known bug or is there an obvious solution to this which I am missing?

I think you also need to override the display property of the parent `` element too. — Dai, May 17 '19 at 10:47
Which device are you testing on? Breaking tables td into rows in Android can be done with `th`. Still the question is what device is causing issues. — Syfer, May 17 '19 at 11:11
possible duplicate of https://stackoverflow.com/questions/8989161/how-do-i-get-ms-outlook-to-accept-the-css-style-displayblock — yunzen, May 17 '19 at 11:36
Tried setting the display property on the parent `````` as well but no luck. I am testing on iOS Safari/Chrome browser and not even email client. The email client is Apple Mail. It's happening on the browsers and client. — Niraj Pandey, May 17 '19 at 12:24
Syfer's solution to use th tags rather than td would work. Alternatively you could use aligned tables side by side and then on mobile just overriding the width with 100%. You would however need to add in fixes for Outlook - https://www.emailonacid.com/blog/article/email-development/using-ghost-columns-to-fix-alignment-problems-in-outlook/. — , May 17 '19 at 13:27
@Syfer What you suggested indeed works even on iOS. I can't mark the comment as an answer, so if you post it as an answer, I will make it as answer :) — Niraj Pandey, May 18 '19 at 11:12
The expression "**when it goes responsive**"" threw me for a while. Responsive pages don't "go" responsive, they "are" responsive. Then I saw "``@media only screen and (max-width: 480px)``". This is not _responsive_ style, it is _adaptive_ style. You should change "responsive" to "adaptive" in the question. (Though personally I'd change the style itself to use the in most ways far better _responsive_ style, which might also solve your underlying problem.) — Ray Butterworth, May 18 '19 at 11:54

score 1 · Accepted Answer · answered May 18 '19 at 11:41

Android had introduced a bug back in 2015 when stacking table data td were no longer stackable. As a walk around you can use table head th to do stacking but be sure to use font-style as normal on the th or the fonts get bolded (can have cascade effect if your inline CSS is messed up somewhere).

Working example:

@media only screen and (max-width: 480px){
    .colms th{
        display:block !important;
        width:100% !important;
    }   
}

<table width="100%" border="0" cellspacing="0" cellpadding="0" class="colms">
  <tbody>
    <tr>
      <th style="font-weight:normal;margin:0px;padding:0px;">Column 1</th>
      <th style="font-weight:normal;margin:0px;padding:0px;">Column 2</th>
    </tr>
  </tbody>
</table>

Note: I added some styles to the th just incase there maybe email clients that try to give margins or paddings. Font weight has been set to normal so it matches other text around it. You can change it if its meant to be bolded.

Cannot override display property in HTML email

1 Answers1