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; }

}

Answer 1

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.