How to hide a content block on Mobile devices


Viewing a page with a lot of content on a device with a small screen, such on a smartphone, sometimes can make the end-user experience and usability unpleasant.
The responsive Splash Portal automatically arranges the content blocks in a single column when the screen becomes small, and usually the content on the right side moves below the one on the left side of the page. This also can change the usability designed on a desktop version.

Using a simple trick, it is possible to hide certain blocks on a mobile screen. When you create or edit a content block, simply add the text "hidden-phone" on the CSS Class input.

Below is an example.

You can also use more flexible parameters to hide/show some content blocks only on specific devices. The Splash Portal is based on Bootstrap framework and you can use Bootstrap scaffolding tricks to manage the layout on different screens resolutions.
The table below lists all the classes you can use to control which content to show or hide on different screen resolutions.

Note: classes must be added without the dot, for example "visible-phone", not ".visible-phone"

Have more questions? Submit a request