Media queries

[Donald Piret]

I have the following type of media query as part of my CSS, and currently Roadie is inlining it causing every single client to behave like a mobile mail client. I guess media queries should be ignored from inlining.

  @media only screen and (max-device-width: 480px) {
       div[class="header"] {
            font-size: 16px !important;
       }
       table[class="table"], td[class="cell"] {
            width: 300px !important;
       }
    table[class="promotable"], td[class="promocell"] {
            width: 325px !important;
       }
    td[class="footershow"] {
            width: 300px !important;
       }
    table[class="hide"], img[class="hide"], td[class="hide"] {
            display: none !important;
       }
       img[class="divider"] {
          height: 1px !important;
     }

[Magnus Bergmark]

This should be included in a separate stylesheet that does not get included at all. Perhaps I could make Roadie output a warning when this happens, but making it more explicit in the README would probably be a good idea.

[Magnus Bergmark]

This is now part of the README. I'll close this issue now.

[Adam St. John]

What about roadie ignoring media queries while parsing and working its magic? That way the specific styles will still be included in the final email for situations when the user is not connected to the internet, but still viewing the email on their phone.

Actually, I just saw the data-immutable bit in the source. Could including that attribute inline work as well?

<style>
  // Some stuff
</style>
<style data-immutable>
  // media queries here
</style>

[Magnus Bergmark]

It should work even on <style> elements, yes.
Since the original CSS is removed from the email, it is impossible to just ignore the media queries and apply them later.

[Magnus Bergmark]

Looks like there's a bug in the android client. I was writing that it should work for style elements.

[Mandeep]

@Mange I've just started with rails and i'm using roadie for instyling in email, but whenever i send a mail its only showing my mobile view. I have put my media queries in separate files as you mentioned but still its not working and one more thing, you mentioned how to ignore stylesheet using null provider in read me file, but as a noob i dont know where exactly to put this into, so can you pls specify it. :)

[Magnus Bergmark]

@mandeep05 You probably read the new README for the 3.0 branch that still isn't released. For that reason, you are most likely not using the correct attributes to ignore the stylesheets.

Take a look at the README for the 2.4 branch instead.

I should perhaps make the Note at the top more readable.

[Magnus Bergmark]

Sorry, it's hard to know the cause for your problems from this short
description.

We're also discussing in an inappropriate place. Please open up another
issue and let's discuss there.

In the mean time I would suggest that you start slow with a minimal set of
styles an then work your way up. You can detect errors faster when they
occur.

Also note that most email clients will not support media queries or any
other advanced features. You could google a list of clients that support
media queries and see if that matches.
Most client will not load external stylesheets either and only apply styles
that are inlined.

All in all, use stylesheets like you were working with IE5.5 or Netscape
navigator. :-(

Magnus

Den tisdagen den 29:e oktober 2013 skrev Mandeep:

@Mange https://github.com/Mange thanks but now i have a different
problem, its not applying all the css inline only some of it is inline.
It's as if css is cached somewhere, because even when i'm doing changes in
css file, those changes are visible in development but in email they
aren't. Secondly its not applying my media-queries if a user check email in
phone. Any suggestions?

—
Reply to this email directly or view it on GitHubhttps://github.com//issues/20#issuecomment-27309636
.