I need help with my homepage banner image as I am trying to make it responsive by adding media queries. The goal is for the image to adapt to 3 different sizes based on the screen being used, but currently only the medium-sized version appears. Could someone please review my code and let me know what I'm doing wrong? Thank you.
Below is the code in question:
/*---------------------------------------------
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;
}
}