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?

TL;DR
  • In Webflow Designer, switch to the mobile breakpoint, select the element (e.g., circle or line), and set its display to "None" in the Style panel.  
  • Ensure the element remains visible on tablet and desktop breakpoints, and optionally use a combo class for consistent styling across elements.

To remove design elements like circles and lines from the mobile version of your Webflow site without affecting desktop and tablet versions, you should use Webflow’s responsive visibility settings.

​

1. Select the Element in the Designer

​

  • Open your project in the Webflow Designer.
  • Use the Navigator panel to select the element (e.g., a circle or line) that you want to hide on mobile.

​

2. Switch to the Mobile Breakpoint

​

  • At the top of the Designer, click the mobile portrait (or mobile landscape) icon under "Breakpoints" to switch to the mobile view.
  • You should now be editing styles specific to that screen size.

​

3. Hide the Element Using Display Settings

​

  • With the element selected, go to the Style panel (right sidebar).
  • Scroll to the Layout section.
  • Set the Display setting to None.
  • This hides the element on the current breakpoint and any smaller ones (e.g., from mobile landscape to mobile portrait and smaller).

​

4. Confirm It’s Visible on Larger Breakpoints

​

  • Switch back to larger breakpoints (tablet or desktop).
  • Make sure the element is still set to display properly (e.g., Block or Flex).
  • Webflow’s style cascade allows you to override visibility per breakpoint, so there’s no risk as long as the element isn’t hidden higher up the cascade.

​

5. Optional: Use Combo Classes or Custom Breakpoint Classes

​

  • If you’re hiding multiple elements the same way, consider creating a reusable combo class (e.g., .circle.mobile-hide) and apply the display: none setting only on the mobile breakpoint.
  • This helps maintain more control and consistency across breakpoints.

​

Summary

​

To remove visual elements like circles or lines from only the mobile version, use the mobile breakpoint in Webflow Designer, select the element, and set its display to "None". This ensures it stays visible on tablet and desktop while being hidden only on mobile.

Webflow Resources
Webflow templates
Webflow inspiration
Rate this answer

Other Webflow Questions

Explore Logic tutorials
Is there a workaround in Webflow to make all slides equal height based on the tallest slide?
How can I add this to Webflow? Is there a script or code available?
Can the scrolling speed be adjusted in Webflow, similar to a specific website?
How can I integrate the form on my Webflow page to a Sendgrid account for email capture, considering the limitations of the Sendgrid widget and the lack of necessary functions in Zapier?
Why aren't my blog pages being indexed by Webflow?
How can I ensure my Webflow website refreshes when users click the back button, while also keeping the scroll position intact?
Does anyone use the code or setting "Strict-Transport-Security: max-age=31536000; includeSubDomains; preload" in Webflow to prevent SSL stripping and improve website security?
How can I hide these fields on Webflow if there is no CMS entry for them?
How can I create an overlapping layout in Webflow using a separate div block for the gray box and ensuring the image stretches to the edge of the screen?
Is it possible to have a Vue.js application running on Firebase hosting while using Webflow for marketing campaigns, homepage, and blog, all under the same domain for SEO purposes?
How can I make an element change color simultaneously in Webflow using a scroll into view interaction? Currently, the element only changes color when scrolling down and not when scrolling up.
How can I access the Webflow Editor to begin entering content in my custom CMS Collections templates? I can't sign in on the login page because it says I am the site administrator, but I don't see a sign-in option on the General tab in Site Settings.
How can I ensure that the sizes and positioning of my web design elements in Webflow remain consistent and accurate across different views, such as the designer and the toggle preview?
Is there a solution in Webflow to address CSS and Javascript optimization for improving the PageSpeed Score?
Is it possible to build a secure web-app using Webflow where users can create accounts, login, submit confidential information through an online form, update the form with attachments and text, integrate Zoom for scheduling calls, and send SMS and emails, with the form input integrated into a serverless DB like Airtable?
Can I capture a screenshot of a Webflow page on click and convert it to a downloadable PDF?
How can I alternate the layout of the image and heading for each collection item in a two-column format on Webflow?
How can I execute JavaScript code when clicking a specific button with a given ID in a Webflow project?
How can I disable the Webflow success or failure state for a sign-up form and display a custom thank you page using jQuery and the Webflow form submit state?
How can I create a vertical scrolling menu with Webflow, similar to the one on Apple's website, that switches to horizontal scrolling when the menu doesn't fit on one screen?
How can I change the language of the Google Maps embed from English to Arabic in Webflow?
How can I reduce the vertical space between lines within a bullet point in Webflow? Can I replace the bullet points with icons on the "Services" page?
How can the text color be changed for custom input fields on Webflow?
How can I add conditional visibility in Webflow to prevent a div from appearing on a published page if a CMS field is empty?
How can I stop a YouTube video from playing in the background in audio mode when I close a modal in Webflow?
How can I connect and use my JavaScript and CSS files for special functions and styles in Webflow?
How can I fix the "Ensure text remains visible during webfont load" warning in Webflow?
How can I implement a ThreeJS script as a background for my Webflow project using custom code?
How can I send data from a Webflow Form to ActiveCampaign without using Zapier? I have set the form to POST and input the form's action URL, similar to Mailchimp but it redirects me to the admin area of ActiveCampaign without sending the data. Has anyone had success with this method?
Can Webflow be used to create a "blob" elements effect in the header of a website using custom code or JavaScript?