Get Even More Visitors To Your Blog, Upgrade To A Business Listing >>

possible to hide specific character within media queries?

possible to hide specific character within media queries?


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.

  • FOR |
  • Iframe
  • 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; }
    Problem courtesy of: swordfish


    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:

    Remove the pipes from your content:

    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.

    Solution courtesy of: Jordan Running


    View additional discussion.

    This post first appeared on CSS3 Recipes - The Solution To All Your Style Problems, please read the originial post: here

    Share the post

    possible to hide specific character within media queries?


    Subscribe to Css3 Recipes - The Solution To All Your Style Problems

    Get updates delivered right to your inbox!

    Thank you for your subscription