How can I remove design elements like circles and lines from the mobile version of my Webflow site without affecting the website and tablet versions?

To remove design elements (like circles and lines) from your mobile version in Webflow without affecting desktop or tablet versions, you'll use device-specific display settings.

1. Select the Element You Want to Hide

• Click on the element (e.g., circle, line) directly on the canvas or use the Navigator panel to select it.
• Make sure you are editing in mobile portrait or mobile landscape view using the responsive design toggles at the top of the Designer.

2. Hide the Element on Mobile Views Only

• With the element selected in mobile view, go to the Style panel (right sidebar).
• Locate the Display section.
• Set the display to None (this hides the element only on the current breakpoint and smaller).

3. Double-Check Higher Breakpoints

• Webflow applies styles cascading downward, so hiding something in mobile view does not affect tablet or desktop.
• To verify, toggle to tablet and desktop breakpoints and confirm that the element is still visible in those views.

4. Use Custom Classes If Needed

• If multiple elements share the same class but need different behavior on mobile, consider:
• Creating a combo class (e.g., .circle.hide-on-mobile).
• Or using custom utility classes like .mobile-hide with display:none set on mobile only.

Summary

Set the Display to None for the element in mobile breakpoints only to hide design elements like lines and circles, while keeping them intact for desktop and tablet views. Use Webflow’s responsive controls to manage visibility without affecting higher breakpoints.