What is the reason for the removal of visibility control in Webflow and what alternative options are available for displaying different sections on desktop, tablet, and mobile?

Webflow removed the legacy visibility control setting to streamline responsive design workflows and encourage more modern, flexible styling practices. Here’s why it happened and how to achieve the same results using new methods.

1. Reason for the Removal

• Legacy Limitations: The old visibility toggles were simplistic (e.g., Show/Hide on device), which sometimes led to inconsistent results or confusion when combined with custom CSS or styles.
• Better Control with Display Properties: Webflow encourages using CSS display properties (like display: none) for responsiveness, offering more granular control and clarity.
• Cleaner Code Output: The legacy method added redundant classes. Using modern display techniques keeps the published code cleaner and more optimized.

2. Preferred Alternatives Using Display Settings

To hide or show elements on specific breakpoints, use the Display property in Webflow’s styles panel.

• Select the Element you want to control.
• On the base breakpoint (desktop), set the element’s Display to block, flex, or whatever you want it to be.
• Then switch to the desired breakpoint (tablet, mobile landscape, mobile portrait) and set Display: none for those where the element should not appear.

This approach is:

• Responsive: Changes cascade only to smaller breakpoints unless explicitly overridden.
• Visual: You can preview the effect in the Designer as you work.
• Flexible: You can use combo classes or interactions for more complex logic.

3. Using Combo Classes for Variant Sections

If you need completely different content or layout per device:

• Duplicate the element or section, and assign a combo class like section mobile-only or section desktop-only.
• Use Display: none on the breakpoints where each version shouldn’t appear.
• This is ideal for custom layouts or text that vary by device.

4. Embedding Custom Media Queries (Advanced)

For even more control (e.g., show/hide at exact pixel widths):

• Use custom code in the Page Settings or Embed component with your own media queries.
• Only recommended for advanced users who need behavior not possible with the native breakpoint system.

Summary

Webflow removed the old visibility controls to promote more robust, CSS-native styling. Instead, use the Display setting on different breakpoints to show or hide elements responsively. For advanced needs, combo classes or custom media queries can also be used.