CSS Variables implementation guide in Media Queries for Different Viewports
I tried several approaches but none seem to work. I'm working on a project and hit a roadblock. I've been struggling with this for a few days now and could really use some help. I'm sure I'm missing something obvious here, but I'm working on a responsive design using CSS custom properties, but I'm working with an scenario where the variables do not seem to update when the viewport changes. For instance, I have the following CSS: ```css :root { --font-size: 16px; } @media (max-width: 768px) { :root { --font-size: 14px; } } body { font-size: var(--font-size); } ``` I expected the font size to change to 14px when the viewport width is 768px or less, but it does not update as expected. I’ve tried resizing the browser and even using the developer tools to simulate different devices, but the font size remains at 16px. Also, I’ve ensured there are no typos in the media query syntax and that my browser supports CSS variables (I’m testing in the latest version of Chrome). I've also checked if there are any conflicting styles in my CSS file, but I can’t find any. Could there be a specific reason why these variables are not updating properly when the media query is triggered? Any help would be greatly appreciated! This is part of a larger API I'm building. I'd really appreciate any guidance on this. I'm developing on Linux with Css. I'd really appreciate any guidance on this. I'm developing on Windows 10 with Css. This is happening in both development and production on Linux. Any help would be greatly appreciated!