jQuery .css() method not applying styles conditionally based on viewport size
I'm having trouble with I'm sure I'm missing something obvious here, but I'm relatively new to this, so bear with me. I'm trying to conditionally apply a CSS style using jQuery based on the viewport width, but it's not working as expected. I want to change the background color of a div to red if the viewport width is less than 600 pixels, and to blue otherwise. However, when I resize the browser window, the background color doesn't update correctly after the initial load. Here's the code I've implemented: ```javascript $(document).ready(function() { function updateBackgroundColor() { if ($(window).width() < 600) { $('#myDiv').css('background-color', 'red'); } else { $('#myDiv').css('background-color', 'blue'); } } updateBackgroundColor(); // Initial call $(window).resize(function() { updateBackgroundColor(); }); }); ``` Initially, the background color changes correctly on page load. However, when I resize the window, sometimes it doesn’t change back to blue when I expand it past 600 pixels. I checked the console for errors, but there are no behavior messages. I am using jQuery version 3.6.0. Is there a best practice or a more reliable way to handle this viewport resizing in jQuery? What might I be missing here? Am I missing something obvious? I'm coming from a different tech stack and learning Javascript. Thanks in advance! For reference, this is a production application. My team is using Javascript for this application. I'd love to hear your thoughts on this.