Media queries in html email templates-CodePudding

Using

<style>...</style>

and classes in email html are not allowed, but responsive emails are required. Can somebody say alternatives to the next code

 <style>
    @media (max-width:570px) {

      .row-content {
        width: 100% !important;
      }
    }
 <style>

? Thank you

CodePudding user response：

Media queries in general have pretty good support across email clients. There are a few limitations (like Gmail not understand height based media queries), but this is usually not a problem. There are however a few edge cases worth knowing about:

Gmail on mobile (iOS and Android) does not support <style> tags (and thus media queries) when using a Non Gmail Account (like an Outlook.com email address for example).
Yahoo on Android requires an empty <head></head> tag before your real head tag as it removes the first <head> (and all its content) it finds.

For these cases, the best practice is usually to opt for a different coding approach, not relying on media queries like the fluid/hybrid technique or a mobile first approach.