Hiding Content on Mobile/Desktop

Although your content will automatically adjust itself to display in a more optimized way depending on the device it is being viewed from (for example, if you have “stack on mobile” turned on at the individual block-level for columns, the 2+ columns will display one after another on mobile, rather than side by side like on desktop), we understand there are times when you just want a bit more control over what displays on mobile and what doesn’t.

We recommend using this method sparingly.

  • 00:10: what this is and why to use sparingly
  • 00:57: option one – grouping content together
  • 05:41: option two – using CSS classes


Option 1. Hide an Entire Group Using the Group Block

  • Hide an entire group of content by first grouping your blocks together.
  • Then, in the Styles area, select “Only Show On Desktop” or “Only Show On Mobile”:
Hide content on mobile/desktop by using group block style

These styles are only available for group blocks. If you need to hide an individual element, use option 2.

Option 2. Hide Individual Element Using An Additional CSS Class

  • If you only want to hide an individual element — not an entire group — you can scroll down in the Block Settings panel until you reach Advanced >> Additional CSS class
  • Add the class desktop-only or mobile-only in this space:
Hide an individual element on mobile or desktop by using an additional CSS class


  • On the page/site editor screen, content will never disappear completely like it will on the front-end. Rather, it is faded out so you won’t forget about it!
  • Use your web browser’s Developer Tools to simulate what your website will look like on different screen sizes.