Hide elements on different breakpoints

We’re transitioning to a new UI, and are in the process of updating our Webflow University content.

Formally, the Webflow Designer had element-specific options for setting display visibility.If you wanted something visible on desktop and table but not on mobile devices, you would turn off visibility for the rest.

But this means there are multiple sources of truth.

To control device-based visibility, use the breakpoint selection at the top of the Designer and set the display setting on that class to display: none. To make it visible again, you can and set it back.

To affect visibility per-element( say you don’t want every single element with that class to disappear:

Add a combo class (e.g., “hidden”
Set it to display: none

Now only that element (or any other elements that have that combo class applied) will be hidden.

Learn more about styling across breakpoints.

Learn more about triggers and animations on specific breakpoints.

Control device-based visibility in Webflow.

Table of contents

Continue learning

Add a Spline scene to your Webflow site

Archive a site

Build a locale switcher

Custom element

Duplicate a site

Localization overview

Localize Collection content

Localize content and styles

Localize page settings

Localized SEO and locale routing

Manage Localization add-on plans

Pointer events

Transfer a site

Variables

Edit mode

Manually connect a custom domain

Manually connect a custom subdomain

Quick connect a custom domain

Quick connect a custom subdomain

Webflow Apps overview

Publishing workflow

Add Shopify products to your Webflow site

Connect Webflow to third-party apps with Zapier

Embed Soundcloud tracks on your Webflow site

Embed an Eventbrite checkout on your Webflow site

Embed dynamic Twitter share buttons on your Webflow site

Integrate Optimizely for A/B testing

Embed an Instagram feed on your site with Elfsight

Control text wrapping and line breaking

Single Sign-On (SSO) Login

Comments

Building web layouts

V Flex and H Flex elements

DevLink in the Designer

Creator Credits

Quick Stack

Text stroke

Webflow staging subdomain

Import/export user accounts

Disable spellcheck with custom attributes

Small, large, and dynamic viewport units

Wrap element in div or link block

Webflow plans and pricing

Create contacts in Hubspot with Webflow Logic

Create records in Airtable with Webflow Logic

Figma to Webflow plugin

Subscriptions

Variable fonts

Semantic HTML5 tags

Agency or Freelancer guest role

Components

Contribute to the Webflow Marketplace

Creator profiles

Libraries

Page branching

Webflow Experts

Webflow Marketplace overview

Make HTTP requests with Logic

Webflow Logic overview

Redeem Creative Market template purchase

Sales tax on Webflow subscriptions

Email subscription settings

Marketo forms integration

Copy and paste between sites

Save your site as a shared Workspace template

Webflow templates overview

Configure taxes on Ecommerce orders

Upload custom fonts

Set 301 redirects to maintain SEO ranking

Set a default line height for your entire site

Manage your account profile

Webflow for creators

Integrate Google Optimize for A/B and multivariate testing

HubSpot forms integration

SSL hosting

Webflow Pages plugin for WordPress