Webstudio
Log in

Join the Webstudio community

Updated 3 weeks ago

Modifying elements based on breakpoint.

ssteve
·
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!
A
s
O
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
  1. very easy to do: choose the breakpoint, set display: none or display whatever
OOleg Isonen
  1. 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
Sign up and join the conversation on Discord