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.
TIMESTAMPS:
- 00:10: what this is and why to use sparingly
- 00:57: option one – grouping content together
- 05:41: option two – using CSS classes
HOW TO DO IT:
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”:
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:
WHAT TO KNOW:
- 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.