Why don't my CSS media queries work appropriately - css

Question

I want to create a website which is responsive on mobile and desktop, but my media queries won't work (it's do nithing).
I put my link below if any body wants html and css.
my CSS:
#media screen and (min-width: 900px){
.container{
width: 30vw;
}
.show-onscreen{
display: block;
}
.hide-onscreen{
display: none;
}
}
#media screen and (max-width: 700px) and (min-width: 900px){
.container{
width: 50vw ;
}
}
#media screen and (max-width: 300px){
.container{
width: 99vw ;
}
}
and this is full code:
full code

Answer 1

the below query might be the issue:
#media screen and (max-width: 700px) and (min-width: 900px){
.container{
width: 50vw ;
}
}
here min-width is greater than max-width, hence it will never execute.
You can try below if that is your goal:
#media screen and (min-width: 700px) and (max-width: 900px){
.container{
width: 50vw ;
}
}

Answer 2

#media screen and (max-width: 700px) and (min-width: 900px){
.container{
width: 50vw ;
}
}
max-width: 700px && min-width: 900px will never be true since width cannot be less than 700 and more that 900 on the same time.
I assume you meant to set the rules to be between 700 to 900
#media screen and (max-width: 900px) and (min-width: 700px){
Switch the width values in the media query

Answer 3

To build and website mobile-first you should develop first for mobile and then other sizes.
You will need to use something like this:
Usage: for mobile (except smallest screens), tablet, laptop, desktop, bigscreen. Anyone over 480px
#media only screen and (min-width: 480px) {
// content
}
Usage: for tablet, laptop, desktop, bigscreen. Anyone over 768px
#media only screen and (min-width: 768px) {
// content
}
Usage: for laptop, desktop and bigscreen. Anyone over 992px
#media only screen and (min-width: 992px) {
// content
}
Usage: for desktop and bigscreen. Anyone over 1200px
#media only screen and (min-width: 1200px) {
// content
}
Usage: just for bigscreen over 1600px
#media only screen and (min-width: 1600px) {
// content
}
To use this code you can develop without set media queries until you need to change some css property for bigger screens.
I suggest you to read this article: A Hands-On Guide to Mobile-First Responsive Design