I am trying to hide a div on both a tablet device and a

Question

0

Asked: May 31, 20262026-05-31T06:59:28+00:00 2026-05-31T06:59:28+00:00

I am trying to hide a div on both a tablet device and a

0

I am trying to hide a div on both a tablet device and a desktop. I am using zurbs foundation http://foundation.zurb.com/docs/layout.php to do so. However when I try to apply the classes hide-on-tablets & hide-on-desktops the second one overrides the first one somehow and the hide-on-tablets shows up on a tablet. I can create my own media queries and hide them on both but I figure I should take advantage of classes or what’s the point of having all the code. You can view it on my site at http://goodmorningmoon.ca by resizing the browser. The password for the site is springy88

Thanks in advance.

foundation.css visibility

/* -------------------------------------------------- 
    :: Mobile Visibility Affordances
---------------------------------------------------*/


    .show-on-phones { display: none !important; }   
    .show-on-tablets { display: none !important; }
    .show-on-desktops { display: block !important; }

    .hide-on-phones { display: block !important; }  
    .hide-on-tablets { display: block !important; }
    .hide-on-desktops { display: none !important; }


    /* Modernizr-enabled tablet targeting */
    @media only screen and (max-width: 1280px) and (min-width: 768px) {
        .touch .hide-on-phones { display: block !important; }
        .touch .hide-on-tablets { display: none !important; }
        .touch .hide-on-desktops { display: block !important; }


        .touch .show-on-phones { display: none !important; }
        .touch .show-on-tablets { display: block !important; }
        .touch .show-on-desktops { display: none !important; }

    }


    @media only screen and (max-width: 767px) {
        .hide-on-phones { display: none !important; }
        .hide-on-tablets { display: block !important; }
        .hide-on-desktops { display: block !important; }

        .show-on-phones { display: block !important; }
        .show-on-tablets { display: none !important; }
        .show-on-desktops { display: none !important; }

    }

MY HTML

<div class="row touch">
            <div id="iphoneNav" class="four columns hide-on-tablets hide-on-desktops">
                <?php wp_nav_menu( array( 'theme_location' => 'iphone-menu','menu_class' => 'nav-bar', 'container' => 'nav') ); ?>
                </div>
        </div>