SP0
iPhone 4 & 5 Won't Display Banner Image
I was a little startled to find the 4 and 5 versions of the iPhone are not handling this code at all - neither image is displaying. Works great in 5s and many other mobile clients. Am I missing something obvious here?
@media only screen and (max-width: 640px) {
*[class=hide_on_mobile] { display: none !important;}
*[class=show_on_mobile] { display : block !important;width : auto !important;max-height: inherit !important;overflow : visible !important;float : none !important; }
}
<table border="0" cellspacing="0" cellpadding="0">
<tr>
<td class="hide_on_mobile">
<a href="#"><img width="640" height="150" border="0" src="large-banner.jpg" alt="Banner Text" style="display:block;" /></a>
</td>
<!--[if !mso]><!-->
<td class="show_on_mobile" style="width:0;max-height:0;overflow:hidden;float:left;display:none;">
<a href="#"><img width="100%" border="0" src="small-banner.jpg" alt="Banner Text" style="display:block;" /></a>
</td>
<!--<![endif]-->
</tr>
</table>
Any insights would be appreciated :-)
Could you try adding a width:100% on the parent table?
I remember having a problem like yours ones
Perfect - thanks Wilbert.
Makes sense of course - a width of auto never implies anything more than 0 when it's parent is 0.
Strange that 4 and 5 choke on this though :-)
You're welcome :-)
Did you try... @media only screen and (max-width: 639px) {
That one pixel :)~ ?