How do I hide an element in Webflow?

Set display to none on that breakpoint

Hiding an element is a style, not a delete. Select the breakpoint in the canvas bar, which sits above the canvas. Click the tablet, mobile landscape, or mobile portrait icon. Then open Style panel, Layout, and set Display to none.

Webflow's display article says None hides an element completely. The browser does not render it. That is useful when a block should not appear on a smaller screen. The same article says elements set to none are removed from the accessibility tree, so assistive technology such as a screen reader does not reach the element or its children.

Display is a style, so it applies to every element that shares the class, and it cascades. A value set on desktop cascades up to any larger breakpoints you added, and down to tablet and both mobile widths. A value set on tablet cascades down to mobile landscape and mobile portrait. It does not change desktop. Tablet is 991px and below. Mobile landscape is 767px and below. Mobile portrait is 479px and below.

Deleting is different. A delete removes the element on every breakpoint. Hide it instead when it should appear only on some widths.

Example: a wide comparison table is readable on desktop and cramped on a phone. Switch to mobile portrait and set Display to none on that table's class. Check tablet too, because a none set only on mobile portrait does not hide the tablet. A none set on tablet does hide both phone widths.

Hide one instance with a combo class

If every card uses the class Card, display none on Card hides every card on that breakpoint. Webflow's hide article says to affect one element, add a combo class such as hidden, and set that combo class to display none. Only elements with that combo class are hidden.

Select the one element. Click in the Selector to the right of the base class and type the combo class. Then, with the combo class selected, set Display to none on the breakpoint where it should disappear. The other elements keep the base class and stay visible.

Example: three pricing cards share Card. The phone should show two of them. Add a combo class named hide-phone on the third card only. On mobile portrait, set Display to none while hide-phone is the class you are editing. The first two cards stay on the phone. Desktop still shows all three, because you did not set none on the desktop breakpoint.

What visitors, HTML, and screen readers get

Two facts from Webflow sit side by side. The breakpoints article says hidden elements are not visible on the site and are still present in the published HTML. The display article says elements set to none are not rendered by the browser and are removed from the accessibility tree.

Do not use display none for text a screen reader should still read. The words may remain in the HTML, and they are not available to assistive technology. If the sentence matters on the phone, keep the element visible and restyle it.

Conditional visibility is a different control. It shows or hides an element from a rule, such as an empty Collection field. Use display none when the reason is the screen width.

An eye-slash icon in the Navigator means the element is hidden and is not visible on the canvas. Open the Navigator with its icon or with Z, and click the element name. Webflow says the Navigator can select elements with a display setting of none, which you often cannot click on the canvas.

Show the element again on a smaller width

To show the element again on the breakpoint where you hid it, set Display back to the layout it used, such as block, flex, or grid. You can also clear the style. Click the blue or pink label next to Display and choose Reset, or press Option + click on Mac, or Alt + click on Windows, on that indicator.

Clearing a cascading style clears it where it was inherited. If you set none on tablet and then reset it there, both phone widths lose that none too. If the phone should stay hidden while the tablet shows the block, set none on the phone breakpoint after you clear the tablet.

If tablet should hide the block and mobile portrait should show it, leave none on tablet and override Display on mobile portrait. A style you set on a smaller breakpoint overrides the one inherited from above. After that override, the phone no longer follows later display changes from tablet.

Open the Style panel and use the blue or orange label next to Display to see whether the value was set on this breakpoint or inherited. That check stops you from editing the desktop class while you think you are on the phone.

Check each width, then publish

Click the breakpoint icons one at a time, or open Expand canvas from the canvas bar to see the frames together. Confirm the hidden block is gone only where you intended. A heading that only made sense beside it may need its own display setting.

Publish and check a real phone as well as the Designer. The Designer width is the breakpoint you selected. A published page is what visitors get.

If the block is missing on desktop, display none was set on the desktop (base) breakpoint, or on a class every instance uses. Select the element from the Navigator, read the label next to Display, and reset the breakpoint that introduced none.

If every matching element vanished, the none is on the base class. Move it to a combo class on the instances that should disappear, then reset Display on the base class.

If the phone still shows a block you hid on tablet, the phone breakpoint has its own Display override. Select mobile portrait and reset that override if the phone should inherit the tablet hiding.