BB0
Media Query for High Res Phones
I am developing my first responsive email based on a (old?) course by Justine and Jason.
My media query is . . .
/* MOBILE STYLES ------------------------ */
@@media screen and (max-width:600px) {
td[class="logo"] img {
margin: 0 auto !important; /* trick to center an image */
}
table[class="wrapper"] {
width: 100% !important;
}
When I view my emails on my Samsung Galaxy S6, I do not see the mobile styles.
Is the problem that my Samsung Galaxy S6 has 1440 x 2560 ?
Is there a better media query to trigger the mobile styles for today's high res mobile phones?
The 2 @'s are for my C# coding tools. There is only @media in the HTML.
Hi Bill. If you're testing on the Gmail app on Android, attribute selectors (like
td[class="logo"]) are not supported. You might want to try to replace these selectors by class selectors instead. (Sotd[class="logo"]becomestd.logoandtable[class="wrapper"]becomestable.wrapper.) The reason attribute selectors were used in the past was because Yahoo would incorrectly parse media queries and make the content inside available for every screen sizes. Attribute selectors were ignored by Yahoo, so it helped to prevent Yahoo to apply media query styles everywhere. This was fixed by Yahoo in 2015, so you can safely change this.Change your media query to 640, phones got bigger since that course came out ;)
And there's a really long explanation to your question in regards to the pixel depth of your phone, as your phone has 3x depth and thus its not as massive as you'd might think. I know that's not a great explication but give it a Google :)