How can I use several media queries? - css

Question

I have this code and I have tried to figure out why it's not working. I have read several answers to quite similar questions, but I just don't get any wiser. Is the code in let us say (max-width:480) applying to all the other larger media queries? The only thing I can see working is the (max-width:1000)
#media screen and (max-width: 1000px) {
.figur {
display: none;
}
#about {
width: 100%;
}
#map {
width: 100%;
}
}
#media screen and (max-width: 720px) {
.parallax {
background-image: url("../img/bamseLiten.jpeg");
}
.row .column {
width: 100%;
height: 200px;
}
}
#media all and (max-width: 480px) {
#logo {
display: block;
width: 70%;
align-self: center;
}
.menu li {
display: block;
width: 100%;
}
}

Answer 1

For maximum device comparability and adopting you can use bootstrap 4+ like Media Query
// Small devices (landscape phones, 576px and up)
#media (max-width: 575px) {
}
// Medium devices (tablets, 768px and up)
#media (max-width: 767px) {
}
// Large devices (desktops, 992px and up)
#media (max-width: 991px) {
}
// Extra large devices (large desktops, 1200px and up)
#media (max-width: 1199px) {
}
For ultra mobile first you can use min-width instead of max-width which is like this -
// Small devices (landscape phones, 576px and up)
#media (min-width: 576px) {
}
// Medium devices (tablets, 768px and up)
#media (min-width: 768px) {
}
// Large devices (desktops, 992px and up)
#media (min-width: 992px) {
}
// Extra large devices (large desktops, 1200px and up)
#media (min-width: 1200px) {
}
Hope you will get a better responsive layout using one of this media query.. Thanks

Answer 2

How are you testing this?
You need to make sure you are able to change the screen size... chrome offers decent ability to do this with inspect.
You may want to try using a min-width along with the max?
#media only screen and (min-width: 768px) and (max-width: 990px) {
.class {
position: fixed;
top: 0;
height:40px;
}
}