Only run actions at certain breakpoint

[craigward]

Lets say you have two boxes, A and B. On desktop they each take up 50% width.

On mobile I only want to display one box at a time taking up 100% width, and I have tabs above so you can select the relevant box to view.

Because I am implementing it with x-show="tab === 'a'", on desktop one of the boxes is always hidden as it has display: none attached. Is there a way to only run certain actions at certain breakpoints? or is there another way around it?

[SimoTod]

You can have x-show="tab === 'a' || window.innerWidth > 768"

[craigward]

Perfect, didn't even cross my mind to think of it like that :)