Expressions and Media queries

At a glance

The community member is asking if it's possible to reference media queries in the expression editor to make formatting dependent on media width. The comments suggest that while it's not currently possible, there are workarounds such as creating multiple instances and showing them on different breakpoints. Another community member suggests that the best option is to generate all necessary content and show them on specific breakpoints. The discussion also covers the separation of concerns between data and styling in the web studio, and how to potentially pass data to styles in the future. The community members explore different approaches, including using CSS variables, and eventually arrive at a solution where the community member can switch between layouts by adding and hiding additional elements based on the media width.

KKyloe Graves

Is there anyway to reference media queries in the expression editor, such that formating can be media width dependant?

8 comments

BBogdan

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

OOleg Isonen

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

KKyloe Graves

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.

BBogdan

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.

OOleg Isonen

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

KKyloe Graves

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"?

BBogdan

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.

KKyloe Graves

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

Add a reply

Join the Webstudio community

Expressions and Media queries