Hide a navigation element while on desktop, show it only mobile - css

Question

On my page (test online at visal.de/trb/) I currently try to hide one element and show another when the user is on mobile. The blocked element is the top navigation (Glossar & FAQ and Intern), the element I only want to show to mobile users is the element "Weiterführendes".
I tried nearly everything, like this media query:
/* topfix */ #media (max-width: 479px) {
#header nav ul.hide-top, #header .hide-top {
display: block;
visibility: hidden;
}} #media (max-width: 600px) {
/* Header */
#header nav ul.hide-top li {
display: none;
visibility: hidden;
}
#header nav ul.hide-top li .phone {
display: block;
visibility: hidden;
}
but nothing really seems to work. I guess because the code more than once says that it should be displayed whenever, but in the end say that it shouldnt be shown. Possibly this is what occuring the errors. Anyone knowing a fix or what I did wrong?

Answer 1

A media query with max-width tells the browser to apply the styles when the browser shrinks to that size. Min-width is the opposite. It tells to browser to apply the styles when the browser grows to that size.
In the second media query you listed, which is the first one that will activate when shrinking your browser, you're telling it to display: none which will hide the element and will remove the space it occupies. You're also setting visibility: hidden which will only hide the element but not remove the space it occupies. Using visibility here is redundant.
In the first media query, which is the second one that will activate when shrinking your browser, you're telling it to display: block which will undo the previous display: none, but you're still also setting the visibility: hidden, rather than switching it to visibility: visible, so the element still won't display.
Here's a simple example of a mobile-first approach, rather than desktop-first like your example, to show / hide a class.
.my-mobile-image {
display: none; /* This is how it looks on mobile */
}
#media (min-width: 600px) {
.my-mobile-image {
display: block; /* This is how it looks on desktop */
}
}

Answer 2

you are not using the media queries in the right way . you should describe the min and max lenght of the screen
for mobile screen
#media screen and (min-width:299px) and (max-width:479px) {
display: block;
visibility: hidden;
}
other screen resolution
#media screen and (min-width:480px) and (max-width:600px) {
/* Header */
#header nav ul.hide-top li {
display: none;
visibility: hidden;
}
#header nav ul.hide-top li .phone {
display: block;
visibility: hidden;
}
}
i hope it will work can't test it right now at the moment