Welcome to Discussion Forum, where you can ask questions and receive answers from other members of the community.

Why my emails are looking good on desktop only? G-Mail app is not fetching any CSS of my template. Why?

0 like 0 dislike
So i decided to decorate all email templates in my website. I am using OpenCart hence all the email templates does not have any design at all.

But when I changed the design of all emails, I found that they were looking good on desktop Gmail only.

I don't have any idea why Gmail app on android or iOS is not fetching any css.

Gmail app also does not fetch media query CSS.

Please help
asked Mar 27, 2017 in General by teo.arjun (2,610 points)
edited Mar 27, 2017 by harsh

3 Answers

0 like 0 dislike
 
Best answer
I solved the problem by eliminating all style tags and media query from the template.

Instead i added all CSS inline of each HTML element and it works on iPad, iPhone, Android G-mail app and desktop.

The only issue left is chrome browser. The chrome browser fetching the CSS but not properly and the width of template is also going our of 100%.

If any other face this problem, please use inline CSS always in all email template.

I found email template for Flipkart and Amazon are looking good in chrome browser too. If anyone finds the way to implement email template in chrome browser, please share the method.

Thanks.
answered Mar 29, 2017 by teo.arjun (2,610 points)
1 like 0 dislike

There might be following reasons behind that -

1. Gmail now supports embedded styles (<style>). However embedded styles are only supported in the head of your HTML document. The Gmail Android app does not support <style> at all when rendering emails retrieved through non Google accounts (GANGA).

2. Gmail does not like an '@' declaration within an '@' declaration.

@media only screen and (max-width:320px) { @viewport { width:320px; } }

3. Use of viewport tag - Viewport tag is very popular with responsive designers because it allows us to control the scale of our page. But this tag does not work on all the devices.

4. When using multiple queries, it's important to order your media queries properly to set up their precedence. When using  max-device-width for instance, you should have your desktop rules first, then your tablet media query (if any), and last, your handheld media query.

You can google to know more about the possibilities that might be causing the problem.

 

 
answered Mar 27, 2017 by Mayank Singh (940 points) 1 flag
1 like 0 dislike

Gmail has not historically supported classes or id’s in the <head> of an email, which forced email designers to use inline CSS to style their emails. Now, Gmail will support embedded CSS with classes and id’s, which removes the need for inline CSS in Gmail. This also means Gmail will finally support media queries—and responsive email.

In other words, the following code will now render properly in Gmail:

<html>
  <head>
    <style>
      .colored {
        color: blue;
      }
      #body {
        font-size: 14px;
      }
      @media screen and (min-width: 500px) {
        .colored {
          color:red;
        }
      }
    </style>
  </head>
  <body>
    <div id="body">
      <p>Hi Pierce,</p>
      <p class="colored">
        This text is blue if the window width is
        below 500px and red otherwise.
      </p>
      <p>Jerry</p>
    </div>
  </body>
</html>
 
You can view a full list of supported CSS at the bottom of this post, or in Gmail’s official documentation. Here is a full list of upcoming media query support:
answered Mar 29, 2017 by Vivek Bisht

Related questions

0 like 0 dislike
1 answer 25 views
25 views asked Jun 9, 2017 in General by harsh (8,710 points)
0 like 0 dislike
2 answers 899 views
0 like 0 dislike
1 answer 58 views
58 views asked Feb 24, 2017 in Magento by harsh (8,710 points)
0 like 0 dislike
1 answer 18 views
1 like 0 dislike
0 answers 518 views
...