How do I make these media queries work? - css

Question

I am trying to add media queries to my homepage banner image. I want it to be responsive and update to 3 different image sizes depending on the screen used. Currently only the medium sized image shows up. Please advise what is wrong with my code. Thanks.
Here is my code:
/*---------------------------------------------
Section#Slider [Banner Image]
-----------------------------------------------*/
/* NEXUS 5 Size 412px, XS
(less than 786px no media query since this is
default in Bootstrap)
*/
/* IPAD SIZE 768px and up, S*/
#media screen and (min-width: 550px) {
#slider {
background: url("../img/smartphoneweb_640x285.jpeg") no-
repeat;
background-size: cover;
background-attachment: fixed;
background-position: 10% 0%;
padding: 200px 0 280px 0;
position: relative;
}
}
/* MD, desktops, 992px and up */
#media (min-width: 950px) {
#slider {
background: url("../img/smartphoneweb_1280x570.jpeg") no-
repeat;
background-size: cover;
background-attachment: fixed;
background-position: 10% 0%;
padding: 200px 0 280px 0;
position: relative;
}
}
/* LG, large desktops, 1200px and up */
#media (min-width: 1200px) {
#slider {
background: url("../img/smartphoneweb_1920x855.jpeg") no-
repeat;
background-size: cover;
background-attachment: fixed;
background-position: 10% 0%;
padding: 200px 0 280px 0;
position: relative;
}
}

Answer 1

The main issue was you forgot to add screen in your 992px media query. I made the changes might be this is helpful.
/*---------------------------------------------
Section#Slider [Banner Image]
-----------------------------------------------*/
/* NEXUS 5 Size 412px, XS
(less than 786px no media query since this is
default in Bootstrap)
*/
/* IPAD SIZE 768px and up, S*/
#media screen and (min-width:0px) and (max-width:550px) {
#slider {
background: url("../img/smartphoneweb_640x285.jpeg") no-
repeat;
background-size: cover;
background-attachment: fixed;
background-position: 10% 0%;
padding: 200px 0 280px 0;
position: relative;
}
}
/* MD, desktops, 992px and up */
#media screen and (min-width:551px) and (max-width:992px){
#slider {
background: url("../img/smartphoneweb_1280x570.jpeg") no-
repeat;
background-size: cover;
background-attachment: fixed;
background-position: 10% 0%;
padding: 200px 0 280px 0;
position: relative;
}
}
/* LG, large desktops, 1200px and up */

Answer 2

You can handle style of a spicifique screen size using min and max media query
#media screen and (min-width: 550px) and (max-width: 950px){
#slider {
background: url("../img/smartphoneweb_640x285.jpeg") no-
repeat;
background-size: cover;
background-attachment: fixed;
background-position: 10% 0%;
padding: 200px 0 280px 0;
position: relative;
}
}
/* MD, desktops, 992px and up */
#media (min-width: 950px) and (max-width: 1200px){
#slider {
background: url("../img/smartphoneweb_1280x570.jpeg") no-
repeat;
background-size: cover;
background-attachment: fixed;
background-position: 10% 0%;
padding: 200px 0 280px 0;
position: relative;
}
}
#media (min-width: 1200px){
#slider {
background: url("../img/smartphoneweb_1920x855.jpeg") no-
repeat;
background-size: cover;
background-attachment: fixed;
background-position: 10% 0%;
padding: 200px 0 280px 0;
position: relative;
}
}