Easy Tech TutsHow to Hide Elements on Mobile in Webflow Easily 2026
By Impran M N
Not every element that works on desktop belongs on a cramped mobile screen, and Webflow lets you hide specific pieces per breakpoint without touching your main layout. This guide covers using combo classes and display settings to control visibility safely across devices. It's for designers cleaning up mobile layouts without breaking the desktop view.
01Switch to the mobile viewport
Use the top device selector to shift your view from desktop down to the mobile breakpoint you want to adjust.
02Select the target element
Click on the specific layout block or heading you want to hide only on that device size.
03Add a combo class
Apply a dedicated utility combo class to the element so your visibility change doesn't affect other instances of the same base class.
04Set display to none
In the style panel's layout section, set the display property to none for that combo class at the current breakpoint.
05Verify cascading behavior
Check the desktop and tablet views to confirm the change only applies at or below the breakpoint you edited, then publish.
Frequently asked questions
Will hiding an element on mobile affect my desktop layout?
It shouldn't, as long as you apply the display none setting at the specific mobile breakpoint rather than the base style.
Why should I use a combo class instead of the base class?
A combo class isolates the change to that one instance, preventing it from accidentally hiding every element sharing the same base class.
Does hiding an element remove it from the page entirely?
No, it's still in the code but not rendered visually, so it won't take up space or be visible to mobile visitors.
Can I hide an element only on tablet but show it on mobile?
Yes, since Webflow lets you set display properties independently at each breakpoint, including tablet, landscape, and portrait.
Watch the full walkthrough
The same steps, demonstrated on screen from start to finish.
