Can you set a variable value based on @media condition... i.e. BS4 breakpoints?

As the title says.

Can I set the value or a variable to be either 1 or based on the browser view size/media query min width?

This is basically just determining whether i want my sidebar menu to start opened or closed based on what device the user loads it on.

You can use the browser component to check the viewport vidth and change a variable value or a class.

Thanks @Teodor.

This is what i have on the variable, but can;t quite get it to work (tried with Browser>viewport>width as well as Device)

Am i missing some syntax or is there a different way you would do it?

Could you post your code instead of screenshots in the future? It’s easier to inspect/copy.
Your code should be:

browser.device.width > 768 ? 1 : 0 

Thanks @Teodor. I’ll do that moving forward, i always pasted screenshots as i thought it would be easier to see the code with the formatting from the code view :slight_smile:

Anyway, that didn’t work as i thought at first, but only because i wanted viewport instead of device, as the device width never changed (always returned 2,560 due to my monitor. 4K incidentally, but with 150% windows scaling, it returned 2,560px)

Once i changed to view port and used your code it worked as i wanted. Thanks.

dmx-bind:value="browser.viewport.width > 768 ? 1 : 0"

Thanks again.

1 Like

Here you can see how to format code in your posts:

1 Like