Join the Webstudio community

Updated last month

Modifying elements based on breakpoint.

At a glance

I'm struggling to understand how I can complete these two tasks:

1) Hide an element for a given breakpoint (Case: don't show an image on a mobile device but have it visible on desktop)

2) Change the order of a section for a given breakpoint (Case: On desktop I have a large heading on the left and an image on the right. For mobile I'd like their order swapped, so the image comes first followed by the heading.

Any tips would be most welcome. Thanks!

6 comments

AAndres Ortiz

How good are you with CSS. You could use media queries with display:none for the element you are trying to hide and then for the order of elements you could use flex-direction: row reverse

ssteve

How good are you with CSS.

I am not. 😉

Although you've given me a start to my investigations, thanks.

ssteve

Actually, armed with the information you sent @Andres Ortiz I've found "Display: none" in the Layout option of Webstudio's inspector panel, which I can apply to my image on mobile to hide it.

Attachment

Streeyt_Website___Webstudio_and_steveharman_Mac-Mini__.png

OOleg Isonen

very easy to do: choose the breakpoint, set display: none or display whatever

OOleg Isonen

one way of doing it is wrapping all sections with a container and display: flex and then use order setting on each child on all/any breakpoint

ssteve

!?! of course, thank you.

Can you tell I'm a long-time-WordPress user but short-time-WebStudio user? 😉

Add a reply