Skip to main content

How to show or hide content by device?

When customizing your own Joomla 3 site for tablets and mobile devices, you may come to the conclusion that you do not want to show the whole content but hide/show some site contents on selected screens. In such a situation, help comes from the utility classes included to the Bootstrap library.

 

Responsive utility classes.

You will be able to show or hide content by device by using the following classes:

  • visible-phone - visible for 767px screens and below
  • visible-tablet - visible for 979px to 768pox screens
  • visible-desktop - visible for 980px screens and up
  • hidden-phone - hidden for 767px screens and below
  • hidden-tablet - hidden for 979px to 768pox screens
  • hidden-desktop - hidden for 980px screens and up

 

How to use?

If you would like to hide/show a Joomla module for certain devices, simply add an utility class as module class suffix:

 

module-class-suffix

 

In some cases, when a Joomla module does not support suffixes or you would like to show/hide a template block, you can simply add an utility class as html class attribute:

 

module-class

 

Find more details on responsive features included to Bootstrap here.

Submit your article for free