I am trying to use an @media 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.
Small Screen Style
The sections are not aligned to the left side as they should be due to the media query override.
