Expressions and Media queries

You can create two instances, show one on first breakpoint and another on second.

we can help better if you explain the user-facing use case

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.

Any info gratefully exploited. 🙂

Ian B.

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

Hi Bogdan,

I dontthink ithat will work for me.

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)

cant see another way just now 😦

Perhaps I'm not getting the ''Tao of webstudio"?

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.

Aaaahhhhh ... i see - that works ... 🙂 thank you - I think I misunderstood the precedence of 'SHOW' vs 'DISPLAY'