how to solve this media query conflict? - html

Question

Here am using this two media query ,as I read ,First MediaQuery would affect background-color if size of screen size is equal or less then 340px ,where as 2nd MediaQuery would effect if size of screen is less then or equal to 360px...
#media only screen and (max-width: 340px) {
#arf_recaptcha_hruwj8 iframe {
background-color: blue;
}
}
#media only screen and (max-width: 360px) {
#arf_recaptcha_hruwj8 iframe {
background-color: red;
}
}
What i thought is if size is under 340px,1st query would effect and because we are under 340px now. not in 360px.But instead of becoming blue ,it remain red only.
1.Could You please explain me this confusion ?
2.How to write media query so that when its between 341px and 360px It should be red and when <= 340px i have to be blue.

Answer 1

Just swipe your media query and check it will work for sure.
#media only screen and (max-width: 360px) {
iframe {
background-color: red;
}
}
#media only screen and (max-width: 340px) {
iframe {
background-color: blue;
}
}

Answer 2

It's about precedence(CSS Specificity). Last one always applies if you are applying using same selector. As It reads code/file from top to bottom.
#idid{
height: 50px;
width: 50px;
background-color: red;
}
#media only screen and (max-width: 360px) {
#idid {
background-color: black;
}
}
#media only screen and (max-width: 340px) {
#idid {
background-color: blue;
}
}
JSBin link: JSBin LInk
You can also try css specificity here: CSS Specificity checker

Answer 3

#media only screen and (max-width: 360px) and (min-width: 340px)
{
body {
background-color:red ;
}
}
#media only screen and (max-width: 339px) {
body {
background-color: blue;
}
It's about precedence media query. Last one always applies if you are applying using same selector. swipe the code itz works perfectly