Community Forum

Over the years we have built up a community of email marketers, coders and designers that live and breathe email.

Use the Email on Acid Forum like your virtual water cooler: Stop by to discuss email code, quirky clients and fixes and post your issues (with an example of the code) for our community to offer its assistance.

 
   
iPhone not recognizing @media queries

copaesthetic

Newbie
Total Posts:  2
Posted: 16 January 2012 09:31 PM

Hello,

I’m designing a responsive HTML e-mail that resizes tables & cells depending on the screen resolution one is viewing from. My template is actually functioning well on Android devices, but for some reason my iPhone is not recognizing the media queries I’ve added to the head…

/* Client-specific Styles */
#outlook a{padding:0;} /* Force Outlook to provide a "view in browser" button. */
body{width:100% !important;.ReadMsgBody{width:100%;.ExternalClass{width:100%;/* Force Hotmail to display emails at full width */
.ReadMsgBody {width:100%;.ExternalClass {width:100%;/* Force Hotmail to display emails centered */
body{-webkit-text-size-adjust:none;/* Prevent Webkit platforms from changing default text sizes. */

/* Reset Styles */
body{margin:0padding:0;}
img{border
:0height:autoline-height:100%; outline:nonetext-decoration:none;}
table td{border
-collapse:collapse;}
#backgroundTable{height:100% !important; margin:0; padding:0; width:100% !important;}

/* Mobile Styles */
@media only screen and (max-device-width480px{
[class
=border-top] {
border
-top0px !important;
}
[class
=table][class=cell] {
width
320px !important;
...

Anybody know why that is? Thanks!


 

Michelle Klann

Avatar
Administrator
Total Posts:  204
Posted: 17 January 2012 06:56 PM
[ # 1 ]

Hello,

I just confirmed that the following code works on the Android and iPhone:

<style>
   @
media only screen and (max-device-width480px{
    [class
=table] {width320px !important;}
   }  
</style

—-

<table width="700" class="table">
   <
tr>
      <
td style="background-color:#3C9">test</td>
   </
tr>
</
table

Are you viewing your test results via Email on Acid?  It appears that our system is not simulating this correctly because our parsing engine is looking for quotes - ie: [class=“table”].  I will let you know as soon as it is resolved.

Warm regards and thanks for your post!
Miki