Media Query css e-mail

Question

This is my problem.

I'm coding a newsletter with tables. Working fine. I'm using media query's for the mobile styling. On my computer it works just fine when I scale down my browser. When scale my browser to 480px width, the content changes to the media query css.

When I open the mail on my browser on my phone (iPhone 5c) the content doesn't change to the media query's css! I tested it, and when I set media query max-width to 1000px it does change. But then the desktop version isn't any good anymore...

@media only screen and (max-width: 480px) { 

.nieuwsbrief {
    width: 80%;
    min-width: 0px;
}
}

This is the mailing so you can scale it for your self: http://stilld.nl/template.html

I think the problem is that modern phones have a high resolution. So I used max-device-width instead of max-width, but this didn't work either.

Hope you guys can help!!

(sorry for bad English, I'm Dutch).

Like @LaurensKling said, test first if CSS (besides inline styles) and media queries are supported. Put something really obvious into the CSS and test if it works, like `p { color:red; } @media (min-width: 1px) { p { font-size:100px; } }` — Reeno, Oct 31 '14 at 14:50
@ArtOfCode He should be using tables for the layout if he's coding an email — nunopolonia, Oct 31 '14 at 17:44
I'm using table @ArtOfCode. That's how it should be done:) Tested it with something really obvious, and that is working. — David Hakkert, Nov 01 '14 at 13:22

score 0 · Accepted Answer · answered Nov 04 '14 at 09:10

0

Fixed it myself:

I changed max-width to max-device-width. It does the trick for mobile, but not when you scale down your browser. But I can live with that.

Thanks for all your help!!

answered Nov 04 '14 at 09:10

David Hakkert

669
3
10
25

score -1 · Answer 2 · answered Oct 31 '14 at 14:38

-1

iPhone 5 has a screen width of 640px in portrait.

Normally media queries for phones have a max-width of 767px.

Here is a small digest of what measurements you should use in media queries for different devices from Bootstrap

Extra small devices

Phones (<768px)

Small devices

Tablets (≥768px)

Medium devices

Desktops (≥992px)

Large devices

Desktops (≥1200px)

answered Oct 31 '14 at 14:38

nunopolonia

14,157
3
26
29

Im going to try this. Because now I'm using 480px as max width. BUT: a mail client like apple mail has not got a lot of width. It's very close to the 768 you are using... I give it a shot anyway. I'll keep you posted. – David Hakkert Nov 01 '14 at 13:23
If set it to 800px. And still it's not working. And if I take a bigger number, like 1000px, it will work. But then the desktop version in like apple mail will also display the mobile version... – David Hakkert Nov 01 '14 at 13:47

Media Query css e-mail

2 Answers2