possible to hide specific character within media queries?

Question

I'm wondering if I can simply hide 'pipe' (eg: | ) characters within my media queries at a specific viewport?

I'm wondering because I have a menu that uses them as dividers but renders really poorly at mobile viewports, so would LOVE if I could somehow just hide them.

I'm thinking I may have to use some jQuery with my defined CSS within mobile viewport?

Any suggestions?

Update 10:38AM: Thanks for the awesome responses guys; I've tried suggested with adding class to span tag and now my pipes are not displaying accross, below is the mark-up within the footer.php I have and corresponding hide within media Q's.

<li class="f"><a href="#" class="scrolltime">EXPLORE</a> <span class="pipe"> | </span></li>

<li class="f"><a href="#" class="scrolltime"> FOR</a><span class="pipe"> | </span></li>

<li class="f"><a href="#" class="scrolltime">ENHANCED</a><span class="pipe"> | </span> </li>

<li class="f"><a href="/iframe/buybutton.html" class="fancybox-iframe" style="color:#C6C699;">Iframe</a></li>
</ul>

CSS3:

/* Smartphones (Landscape) ----------- */
@media only screen and (min-width: 320px) and (max-width: 480px) {


#topvidarea {
    margin-left: 24%;
    margin-right: 20%;
    margin-top: -265px;
    max-width: 400px;
}

#topbgimg { display: none; }

#topbtn, #topbtn2, #topbtn3 {
    border: 0 solid #C6C699;
    display: inline;
    float: left;
    font-family: Georgia;
    margin-right: 5px;
    text-align: center;
    width: 122px;
}


#topvidarea {
    margin-left: 24%;
    margin-right: 20%;
    margin-top: 15px;
    max-width: 400px;
}

#footer a {
    font-size: 8px;
    margin: 0;
    padding: 12px;
    text-indent: 1px;
}

.f {
    float: none;
    margin-top: -2px;
    padding-left: 0;
}

.pipe { display: none; }

}

Can you share the relevant code or, even better, make a [fiddle](http://jsfiddle.net/) for it? — Jordan Running, Mar 12 '12 at 14:29

Jordan Running · Accepted Answer · 2012-03-12T14:51:22.337

The root problem here is that you're using content (pipe characters) for presentation (decoration). Avoiding this is one of the main reasons to use CSS in the first place. Imagine a sight-impaired person using your site. How is their screen reader supposed to pronounce "|"? If you're not sure, chances are it should be moved from the content layer (HTML) to the presentation layer (CSS). (In reality screen readers are smart enough to avoid this common pitfall, but it's still a useful mental exercise.)

You can, as @ChrisN suggests, use border-right or -left but another option is to use the :after selector. For example, instead of this:

<nav>
  <ul>
    <li>Foo</li> |
    <li>Bar</li> |
    <li>Baz</li>
  </ul>
</nav>

Remove the pipes from your content:

<nav>
  <ul>
    <li>Foo</li>
    <li>Bar</li>
    <li>Baz</li>
  </ul>
</nav>

And then use the :after selector in your presentation layer (CSS) to put pipes between them:

@media ... {
  nav li:after {
    content: "|";
  }

  /* no "|" after the last one, though */
  nav li:last-child:after {
    content: normal;
  }
}

You can of course use padding properties to put the desired amount of space around the "|"s.

This approach avoids weighing down your page with additional markup and also gives you more flexibility than e.g. border-right, since you could use an image, or several characters or symbols, or some combination, instead of just a straight line.

I think that this is an acceptable use-case for `content`, although I side very much with [what's stated here](http://stackoverflow.com/a/2435542/1134541). — chrisn, Mar 12 '12 at 14:56
I agree that `content` shouldn't be used for, er.. content, but in this case "|" is definitely presentation (as evidenced by the fact that the OP wants to hide it in some views). — Jordan Running, Mar 12 '12 at 15:25

score 1 · Answer 2 · answered Mar 12 '12 at 14:29

1

Your best bet would probably be to change your pipes to border-rights (or border-lefts) and add spacing to make them appear like pipes, or (not recommended) wrap your pipe characters in <span>s or the like. Then you can hide them at will.

But, no, you cannot just hide characters in that fashion via CSS.

answered Mar 12 '12 at 14:29

chrisn

2,095
15
20

Thanks, yeah I've just thought to give them a class at just hide at viewport, but the
, created a line break, and now my pipes are 10px below my menu!!!
– Dr Upvote Mar 12 '12 at 14:31
1

This is because `p` is a block element. Use `span`, as it is inline, or change your css accordingly. – chrisn Mar 12 '12 at 14:32

score 0 · Answer 3 · answered Mar 12 '12 at 14:31

I don't think you can specifically hide characters like that, but you could so something like (very simplified example..)

<span class="noshow> | </span> Home <span class="noshow> | </span About

Then in your media query target it

.noshow { display: none }

This is untidy, but it works.

possible to hide specific character within media queries?

3 Answers3