I am trying to use an [@media][1] query for screen width to apply different styles for different screen sizes, but it doesn't appear to be working. I've written the following directly in the style sheet:
----------
@media screen and (max-width:550px) {
#control-sets{
justify-content: flex-start;
}
}
----------
This should override the style written earlier in the style sheet (*space-around*) and use *flex-start* when the screen is small. It's not applied to my canvas in UI Builder and does not show up in the USS preview, but I see the code in my IDE. This is my first time working with UI Toolkit, so any help is appreciated! I am very confused.
----------
**Wide Screen Style**
Section is selected to show padding.
![alt text][2]
----------
**Small Screen Style**
The sections are not aligned to the left side as they should be due to the media query override.
![alt text][3]
[1]: https://www.w3schools.com/css/css3_mediaqueries.asp
[2]: /storage/temp/200073-screenshot-3.png
[3]: /storage/temp/200074-screenshot-4.png
↧
