I'm seriously stumped on this one. I'm attempting to use one of Dan Mall's recommended techniques for setting line breaks, but on mobile in an html email signature, just as a progressive enhancement where media queries are supported. I'm doing this within a table cell, but I'm trying to do it in text, via a span or a br tag with a class, instead of applying media queries to a tr or td. However, even when testing in Chrome, the media queries don't seem to be applying at all. For my media queries, I'm doing:
@media screen and (max-device-width:480px) {
span[class="rwd_hidden"] { display:visible !important; }
br[class="rwd_break"] { display: none !important; }
}
@media screen and (min-device-width:481px) {
span[class="rwd_hidden"] { display:hidden !important; }
br[class="rwd_break"] { display: hidden !important; }
}
and the applicable section from my HTML:
<span style="font-family:Geneva,Tahoma,Arial;
font-weight:bold; color:#5D889D; font-size:11px; line-height:20px;">Office</span>
<span style="font-family: Tahoma,Verdana,Arial; font-weight:normal; font-size:12px; line-height:20px; color:#304958;"><a href="tel:000000000" style="text-decoration:none; border:none; color:#304958;">(000) 000-0000</a></span>
<br class="rwd_break" />
<span style="padding:0; color:#D4E3E9;" class="rwd_hidden">|</span>
Just trying bracket class targeting here because I read Yahoo sometimes stumbles over that—I've done it both ways. Mainly just trying to break a long line with two phone numbers, only on mobile, and to hide the pipe divider, but no luck. Any help? Is it normally not possible target things with a MQ within a table?
Your media queries are fine. It's just that "visible" isn't an acceptable option for the display: property – I think you might have display confused with visibility.
I think Dan Mall's original approach should be fine here. It looks like you're also using .rwd_hidden, so I've added that to his code.
@media screen and (min-device-width:481px) {
.rwd_hidden,
.rwd_break {
display:none;
}
}