Hiding elements on breakpoints

Hiding elements per breakpoint is a great way to make sites look just right on every screen size. For example, a complex design that looks perfect on desktop may seem cluttered on a smaller screen size. Hiding elements allows you to adjust a design per breakpoint, so it looks great on every screen.

To making this easier in Flex, we’ve added more ways of hiding elements: 

1. From the layers panel, locate the element you want to hide and click the eye icon.

2. Right-click on the element to display the context menu and select Hide on this breakpoint. 

3. Click on an element to display the floating bar, then click the snowman icon (3-dot icon) on the right to reveal the menu and select Hide on this breakpoint.

(Note: This method is not yet available for Grid, Container and Flexbox elements.)

You can also hide an element using keyboard shortcuts: Shift+Command+h for Mac. Shift+Control+h for Windows.

Note: To show an element that's been hidden, open the layers panel and click the eye icon.

Keep sending your feedback

Thanks to your ongoing feedback, we’re improving DudaFlex all the time. Tell us what you think via the Send feedback button you’ll see in Flex mode, or via the form below.

Haven't taken the Duda U DudaFlex course, yet?

Now’s the time! It’s free, on-demand, and sure to improve your DudaFlex skills in no time!