Not able to apply media query to gmail

Question

I have used table layout, where I want to make td in a separate row for mobile.

I have used the media query as below

@media (max-width: 480px) {
  td {
      padding: 5px !important;
     }
}

But it is not working, I have also tried it with screen as below

@media screen and (max-width: 480px) {
  td {
      padding: 5px !important;
     }
}

and

@media only screen and (max-width: 480px) {
  td {
      padding: 5px !important;
     }
}

None of the above worked to make it work on mobile.

I also tried applying background color to the body based on the media query, but it seems the media query is not getting applied on Gmail mobile app(Androind and iOS).

Please let me know if I am missing anything here.

Answer 1

Media queries aren't well supported in gmail, especially for mobile. You can see the level of support here - https://www.caniemail.com/search/?s=media+queries