Hi there - thanks for that - that would work but might start to get cluttered as more complexity arrives!
I'm building a 'list of things' page with a collection I am styling some items differently to avoid a long dull list The styling will need different treatment as the media narrows - so i'm trying to avoid having multiple objects in the design panel, and am trying to keep all the 'logic' in the world of tokens and expressions. (Separation of concerns and all that)
Ideally for my particular case I would like to have the 'layout' elements controlled by expression - but I see that, that isnt available, but media queries in expressions would be s close second.
Following this "separation of concerns", styling in webstudio completely separated from data (variables and expressions). There will be ways to pass something from data to styles in the future. Though in your case the best option is to generate all necessary content and show them on specific breakpoints.
We heard about this use case before, we gave examples somewhere how to create a style tag and define css variables using data and then use those variables for styling
I am using the 'show' option to alternate between "<IMG><TEXT>" and "<TEXT><IMG>" layout on each row, using data from the resource to identify which row is styled in whch way. Once i have an expression in the expression editor for 'SHOW' - I cant then set show to 'false' for narrower layouts where I want to have a format of
<IMG> <TEXT>
for all rows ...
I could solve this if I could either
a) access the media width in the expression b) alternate row styling using some other method (if expressions were available in the 'layout' section say)
So the switch between img and text with "show" stays as is For switch between breakpoints you add one more img or text and give them display: none when they need to be hidden. The opposite need to be done with original img or text.