media query

[suganyaaliassanusha]

I am designing a mailer and I have two different stylesheets. one for desktop and one for mobile. I have included roadie-rails gem in my gemfile. In my layout file I have

link rel="stylesheet" type="text/css" href="/assets/mailers_template/mailers_layout/mailers_template_desktop.css" link rel="stylesheet" type="text/css" href="/assets/mailers_template/mailers_layout/mailers_template_mobile.css" data-immutable

But still when my mail is delivered, I could see my media query overrides the native styles.

What should I do so that my media query works for devices and native styles for desktop?

[Mange]

The parameter data-immutable is for the older version of roadie (<= 2.x); change it to data-roadie-ignore and it should work the way you want.

I hope that helped. If not, please reopen this issue.

[suganyaaliassanusha]

Awesome! That works. Thank you

[levelone]

Hi @Mange,

I seem to have stumbled upon this exact same problem. Having 2 separate css files both pointing to my email template..

My concern is that 'data-roadie-ignore' completely ignores the css file and doesn't consider the media query. Without it, media query overrides the native styles just like @suganyaaliassanusha.

What am I missing here?

Gemfile: gem 'roadie', '~> 3.1.0rc1' gem 'roadie-rails', '~> 1.1.0.rc2'

Reference: email_layout.html.haml - https://gist.github.com/levelone/d570362b86ac3c9eafe6 email_layout_mobile.css - https://gist.github.com/levelone/6439466326c0c2b19406 email_layout_web.css - https://gist.github.com/ff416eedb7ab495848b8

[Mange]

Your problem might depend on a whole lot of different things. First, how do you expect these media queries to work? Are you talking about them not being applied in your email, or is it some web version of the same view – e.g. not an email at all?

Debugging

Email

Which client are you using? Are you sure it's even downloading the stylesheet? If you added something to it that didn't depend on media queries, and that doesn't collide with the rest of the styles does it get applied?

Here's an example:

@media screen and (min-device-width: 600px) { 
  /* ... */
  html body.email-body { color: red !important; } /* Super specific omg */
  .header { border: 5px solid red; } /* Completely unrelated style */
}

/* Same rules but other colors to rule out @media problems */
html body.email-body { color: blue !important; }
.header { border: 5px solid blue; }

/*
If you see blue in the email, it's downloading the file but not applying @media rules;
if you see red everything works and the problem is with specificity fighting;
if you see neither, the stylesheet is not downloaded by the email client
*/

It's generally unusual for email clients to download external assets, and it's also very uncommon to support media queries.

Web page

That would most likely be a specificity issue. I see you already have !important on all of the styles, so you'd have to debug it in a browser. Inspect an element and look at the styled applied to it. Your media query styles should be there, but might be below "element styles". In that case, it's not "important enough". I have no good idea on how to fix that case.

Fixing

Email – you can fix this by embedding a style element instead:

%head
  :css
    @media screen and (min-device-width: 600px) { 
      .header {
        background: #134F72 !important;
        text-align: left !important;
      }

      .email-container {
        padding: 40px 0 !important;
        width: 600px !important;
      }
    }

Web page

Sorry, mate. I don't know.

[levelone]

I want the media query to listen when I resize the screen. So that the styling will change depending on my screen size. Is this possible with roadie-rails?

Currently we are on Rails 3.2.1, (ActionMailer) using SendGrid for our emails on development & production. Referencing the css files actually works using <link ref='' ...> so that saves us alot of code being thrown at the email.html file.

I've used the process you've suggested:

%head
  :css
    @media screen and (min-device-width: 600px) { 
      .header {
        background: #134F72 !important;
        text-align: left !important;
      }

      .email-container {
        padding: 40px 0 !important;
        width: 600px !important;
      }
    }

Sadly :css doesn't go well with SendGrid.. Upon inspecting the email template, i see that my classes are declared along with their styles from the css files I referenced from.

Is there anything I can do on my end to make my case a little more clear?

[Mange]

I need to know why the media query isn't applied to your view of the email. My understanding is that it should work in your setup if your client downloads the stylesheet and understand media queries (that's a tall order, I think it's pretty much only iOS Mail that does this; might've changed since I last looked into it).

I've never used SendGrid, and I have not sent a single mail from code in a few years now so I don't know much about it anymore.

ons 21 okt. 2015 13:49 Marc Seifert notifications@github.com skrev:

Currently we are on SendGrid for our emails. Referencing the css files actually work. Using 'data-roadie-ignore' ignores the file from being set.

In a nutshell what I want to achieve is make my email responsive. So initially what is currently happening is I set my mobile_layout (which works), and in the case of the user using a desktop, I want to consider both mobile_layout and web_layout stylesheets (web having the media query). Is this possible to achieve using roadie-rails?

I've used the process you've suggested:

%head :css @media screen and (min-device-width: 600px) { .header { background: #134F72 !important; text-align: left !important; } .email-container { padding: 40px 0 !important; width: 600px !important; } }

Sadly :css doesn't go well with SendGrid

— Reply to this email directly or view it on GitHub https://github.com/Mange/roadie-rails/issues/23#issuecomment-149865132.

[levelone]

Resizing works when I remove include Roadie::Rails::Automatic from my mailer.rb file... There could possibly be an issue with @media queries and roadie-rails :(

[levelone]

Similar case is found here: http://stackoverflow.com/questions/26466207/how-to-neglect-the-media-query-style-that-overriding-the-desktop-style-in-roadie

[Mange]

So it seems like a specificity war, then. I guess media queries don't override inlined styles, even tough they are important.

I might be able to construct a small HTML prototype displaying this problem and then solve it.

tors 22 okt. 2015 04:10 Marc Seifert notifications@github.com skrev:

Similar case is found here: http://stackoverflow.com/questions/26466207/how-to-neglect-the-media-query-style-that-overriding-the-desktop-style-in-roadie

— Reply to this email directly or view it on GitHub https://github.com/Mange/roadie-rails/issues/23#issuecomment-150083314.

[levelone]

Awesome! I'm happy overall with roadie & roadie-rails. When this media query issue gets solved, @Mange you officially saved my life twice :+1: :+1: Do you have an estimate on when this could added?

[Mange]

I've made a small test case. I cannot reproduce your problem in Chrome; the media queries are successfully overriding the inlined styles.

It must be something with SendGrid or with your email client, or I'm misunderstanding your situation. Source code from your email would be helpful.

<!DOCTYPE html>
<html>
  <head>
    <style>
      @media screen and (min-device-width: 600px) {
        .header {
          background-color: pink !important;
          text-align: left !important;
        }

        .email-container {
          padding: 40px 0 !important;
          width: 600px !important;
        }
      }
    </style>
  </head>
  <body class="email-body" style="background-color: #F8F8F8; margin: 0; padding: 0;">
    <div class="email-container" style="background-color: #F8F8F8; font-family: Avenir, 'Avenir-Next', Helvetica, Arial, sans-serif; font-size: 16px; line-height: 25px; margin: 0 auto; max-width: 600px; width: 100%;">
      <div class="header" style="background-color: #134F72;padding: 20px 20px;text-align: center;">
        header
      </div>
    </div>
  </body>
</html>

[levelone]

Thanks for the update @Mange, I believe it may not be a roadie issue after all.. I've noticed that roadie is doing what it's supposed to, it's the way emails work in rails I presume. Emails aren't built to be resizable, which is a pain in the a$$. I read this article on techcrunch on how everyone else doing emails (on gmail at least) face the same problem.

Link: http://techcrunch.com/2015/11/10/gmail-we-need-to-talk/

[Mange]

Yeah, GMail and Outlook are both really bad. GMail is limited due to it being webmail (security reasons, I reckon) and Outlook because it uses Word as the rendering engine.

I recommend a mobile-first design; keep it simple and in a single column. Let desktop styles override in richer clients, when available. Otherwise, the mobile layout should still work pretty well on a larger device.