mia2
mia2

Reputation: 31

Hide menu list on mobile screen

To hide the menu bar on mobile screen i used:

@media (min-width:320px){
    menu{display:none;}
}

@media (min-width:481px){
    menu{display:none;} 
}

But this also lead to disable the menu on desktops too.
This is the website whiskersjersey.co.uk

Upvotes: 0

Views: 589

Answers (2)

Dhaarani
Dhaarani

Reputation: 1360

You should use:

@media (max-width:481px){
    menu{display:none;}
}

instead of min-width. I would also recommend using selectors (.menu or #menu) instead of a direct DOM element targeting, since this element itself can be used in other parts of the website and this will give you a better accuracy on what you desire to style.

Upvotes: 1

Victor Allegret
Victor Allegret

Reputation: 2404

You should use @media (max-width:481px) {menu{display:none;}} instead of min-widthif you just want the menu bar to be hide on mobile screen

Upvotes: 4

Related Questions