1

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>
&nbsp;<br class="rwd_break" />
<span style="padding:0; color:#D4E3E9;" class="rwd_hidden">|</span>&nbsp;

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?

Brian Tompsett - 汤莱恩
  • 5,753
  • 72
  • 57
  • 129
Gregory Warner
  • 43
  • 8
  • A side note, `span[class="classname"]` would typically be expressed as `span.classname`. – Pekka Mar 04 '17 at 23:16
  • 2
    `display` takes one of the following values: `none` `block` `inline` `inline-block` and [a couple others.](https://www.w3.org/TR/CSS21/visuren.html#display-prop) The values you are using aren't correct - likely the cause of your problem. – Pekka Mar 04 '17 at 23:17

1 Answers1

2

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;
  }
}
Leland
  • 2,019
  • 17
  • 28
  • Thanks, I think I had carelessly tried "visible" without looking it up after trying multiple combinations. Problem is, for testing in Chrome, no matter what I do this won't work—it appears my head CSS/media queries aren't working at all (note, this is in Chrome, not in a mail client). However, I pasted this over at CodePen, and THERE is works perfectly. If that CSS was included in style tags in the head, any clue why it wouldn't work?? http://codepen.io/smallreflection/pen/NpryQp?editors=1100 – Gregory Warner Mar 05 '17 at 02:02
  • Should still work fine, even if included in the head. Check it out: http://codepen.io/anon/pen/RpRMwP?editors=1100 – Leland Mar 05 '17 at 02:06
  • 1
    Ah, gracious, thanks. I realized what the issue was—I forgot that an inline stylesheet is opened just with – Gregory Warner Mar 05 '17 at 03:27
  • I'm glad that that worked for ya, but the `type` setting you had should still work. Oh well – a mystery. :) – Leland Mar 05 '17 at 03:32