0

I've been working on email templates. They look great on desktop and gmail app on android/iOS but look ugly if a open gmail in chrome/safari (I've tested on these only). I've added css in my head tag but it looks that in mobile browsers only inline css is working. So if i want to show different logos on mobile and desktop they both show in mobile browser.

I've tried moving my css in inside body tag as per different questions. Here's one of the things i've tried! but this doesn't seem to work either.

Kamran Arshad
  • 81
  • 1
  • 16
  • 2
    Sadly, inline CSS is *still* the *only* consistent way of displaying HTML emails correctly. – Martin Jul 18 '19 at 17:09
  • Thanks for clearing that. – Kamran Arshad Jul 18 '19 at 17:12
  • CSS in the head (even media query) can be read by Gmail but its strict. Any unwanted space, or syntax error the CSS will be ignored. I answered a question right here on SO where media query works in Gmail. Check it out [here](https://stackoverflow.com/questions/49701247/how-do-i-write-a-media-query-for-gmail/49724395) – Syfer Jul 19 '19 at 06:35
  • `@media only screen and (max-width: 767px)` here's my media query @Syfer and its same as yours – Kamran Arshad Jul 19 '19 at 17:53
  • Perhaps you didn't read my question clearly. Its working on Gmail App. Its just not working in mobile browser gmail – Kamran Arshad Jul 19 '19 at 17:56
  • You right, i didn't read it properly, media queries don't work in gmail when viewed in browser that's why they recommend to use app. Also my media query's not same as yours. Spaces makes a difference when it comes to Gmail. – Syfer Jul 20 '19 at 00:18
  • you could try dev tools to see why its not working. it will give you an idea. – Syfer Jul 20 '19 at 00:35

0 Answers0