We do not provide support for hacks, so use them at your own risk. If you're not comfortable with coding, we recommend against using this hack.
With our responsive tool, you have the option to hide sections on various device widths. In some cases, you may wish to behave better control of what content (such columns) to show or hide depending on device width. This guide explains how you can do so with the use of custom class names and a tiny bit of CSS code.
Adding classes to hide content by device width
Navigate to Customize > Advanced > Custom CSS. Add the following CSS into each device editor's corresponding CSS editor:
Desktop Wide:
.hide-for-desktop-wide {display: none !important}
Desktop Wide:
.hide-for-desktop {display: none !important}
Tablet Wide:
.hide-for-tablet-wide {display: none !important}
Tablet Portrait:
.hide-for-tablet-portrait {display: none !important}
Mobile:
.hide-for-mobile {display: none !important}
Adding classes to show content for only a single device-width
Navigate to Customize > Advanced > Custom CSS. If you wanted to create a class so that a device would ONLY show for Tablet Wide, for example, you could add the following CSS:
Desktop Wide:
.show-for-desktop-wide-only {display: none !important}
Desktop:
.show-for-desktop-only {display: none !important}
Tablet Wide:
.show-for-tablet-wide-only {display: block !important}
Tablet Portrait:
.show-for-tablet-portrait-only {display: none !important}
Mobile:
.show-for-mobile-only {display: none !important}
(note the 'display:block' in the Tablet Wide CSS)
Using the custom classes
Now that you've added the above CSS into the corresponding CSS editors, you can now assign these custom classnames to content. Just go to the Column Styles or Section Styles area of each of your content or sections where you want to hide or show content, and add the custom classnames you created above!
Note: be sure NOT to include the '.' before the classname in the editor, this is only required in the CSS to denote it is as a classname.
That's it!
Combining classes
You can also combine class names. For example, if you wanted a column to be hidden for Desktop and Desktop wide just add "hide-for-desktop" and "hide-for-desktop-wide", with a space to separate both class names.