1

@media screen and (min-width: 768px) {
                    .emailWidth {
                        width: 60% !important;
                    }
                    .logo {
                        width: 45px !important; height: 45px !important;
                    }
                }
                
                @media screen and (min-width: 481px) and (max-width:768px) {
                    .emailWidth {
                        width: 80% !important;
                    }
                    .logo {
                        width: 40px !important; height: 40px !important;
                    }
                }
                
                @media screen and (max-width:480px) {
                    .emailWidth {
                        width: 100% !important;
                    }
                    .logo {
                        width: 30px !important; height: 30px !important;
                    }
                }

I'm trying to send the above HTML Email. In Gmail(Web) media queries(Setting width) is not supporting. If I run locally its working fine.

Full HTML - https://jsfiddle.net/yoh2t4s6/

Crosswin Isravel
  • 31
  • 4
  • gmail does not support external styles I believe. The best way to do it would be using HTML table instead – fmsthird Apr 22 '22 at 18:17
  • https://developers.google.com/gmail/design/css Here they used media query, I tried the same – Crosswin Isravel Apr 22 '22 at 18:25
  • then it should work as long as you follow the same structure in their example, like it's the whole email file with html head and body – fmsthird Apr 22 '22 at 18:29
  • I'm using this HTML - https://jsfiddle.net/yoh2t4s6/ – Crosswin Isravel Apr 22 '22 at 18:58
  • 1
    Gmail ignores CSS when it doesnt meet its requirements. Remove the space after the colon (before the px value) make it: `min-width:768px`. If you are using an email editor make sure its not adding those spaces. – Syfer Apr 23 '22 at 14:44

0 Answers0