CODEWITHSUNDEEP
css
Jeff
Jeff

Reputation: 8411

CSS - display: none does not work

I am going to not show a link in case that the device width is less than 480px. To do this, I have used the following CSS:

@media screen and (max-width:480px){
    .container{
        padding-left: 20px;
        padding-right: 20px;
    }
    .content-area{
        padding-top: 20px;
    }
    .hide-small{
        display: none;
    }

}

The HTML is:

<nav class="Nav-bar">
        <ul class="Group">

                <li ><a href="#">Home</a></li>
                <li><a href="#">Services</a></li>
                <li class="hide-small"><a href="#">About us</a></li>
                <li><a href="#">Contact us</a></li>   
        </ul>
</nav>

The problem is hide-small class does not hide the link. I am sure respected css file is loaded on html page. But when i go to the inspect -> Element the li tag has not the hide-small class. It presented the li like this without any class:

<li><a href="#">About us</a></li>

How can i fix it?

Upvotes: 1

Views: 1160

Answers (2)

Aymeric Maitre
Aymeric Maitre

Reputation: 16

It works ! ..

http://hpics.li/b181647 and http://hpics.li/5ea4dc0

the display is on only when width is 480px or under

you can test the width with this:

<script>
        function getWidth() {
          if (self.innerHeight) {
            return self.innerWidth;
          }

          if (document.documentElement && document.documentElement.clientWidth) {
            return document.documentElement.clientWidth;
          }

          if (document.body) {
            return document.body.clientWidth;
          }
        }

        alert(getWidth());
    </script>

Upvotes: 0

Sarantis Tofas
Sarantis Tofas

Reputation: 5167

Probably some other css property is overwriting your class. Try to force it using:

display: none !important;

Upvotes: 2

Related Questions