I'm uncertain about the functionality on desktop screens when it comes to resizing the browser window. My understanding is that changing the orientation should occur naturally when the height surpasses the width and vice versa after resizing.
However, I am puzzled as to why the provided code only takes effect upon page load.
@media all and (orientation: portrait) {
.slider-slide {
background-size: auto 100% !important;
}
}
@media all and (orientation: landscape) {
.slider-slide {
background-size: 100% auto !important;
}
}
The goal of this code snippet is to adjust the size of a background image based on the orientation. Although both orientations work fine when the page loads at the proper resolution, they fail to respond dynamically when the window is resized. Any thoughts or suggestions?