Search code examples
cssruby-on-railsgmailmedia-queriespremailer

Media Queries not working, using Rails premailer

I have been looking into this issue and found no solution at all. Not even background color in Gmail (website from desktop) and in Gmail app. I have tried the following things.

  • add viewport
  • add screen key like this @media screen and (max-width) {}. event with 'only' keyword
  • I have seen the links (i.e; https://www.caniemail.com/search/?s=media) which show Gmail support only a few properties. but those properties also not working.

So I need to know whether we can use media queries or not? So I can stop using it if it won't work.

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width,initial-scale=1">
    <meta name="x-apple-disable-message-reformatting">
    <title>
      <%=content_for(:title) %>
    </title>
    <!--[if mso]>
    <noscript>
        <xml>
            <o:OfficeDocumentSettings>
                <o:PixelsPerInch>96</o:PixelsPerInch>
            </o:OfficeDocumentSettings>
        </xml>
    </noscript>
    <![endif]-->
    <style>
      @media screen and (max-width: 400px) {
          #root, .upper-bar {
            padding: 0 !important;
          }
          #child-cont {
            border: none !important;
          }
          .upper-bar .slogan-text-cont {
            text-align: center !important;
          }

          .pre-footer-section .steps-icon-cont {
            width: 100% !important;
          }
       }
    </style>
Solution

  • Found the problem that, Gmail, Outlook, and similar mail provider, has some limitations on how much CSS you can add. After that particular limit, your CSS won't work at all. So you have removed some CSS. So I did remove some CSS and automatically all my CSS and media queries start working. Unfortunately, I cannot find out any specific limit in any article for these mail providers.

    I found myself that the Gmail CSS limit is more than outlook. Because when Gmail shows proper styling and sends the same mail to outlook, it didn't work for it. So, I further reduce the styling content, then CSS worked for both Gmail and Outlook.