Skip to main content

Display modules only in the mobile version of your Joomla!

| Gianluca Gabella | Joomla!
share on facebook share on twitter share on linkedin

Index:


How many times will it have happened to you, when creating your beautiful Joomla site, to have to make design choices forced upon you by a module or component that is not designed in a responsive manner (i.e. not optimised for display on a mobile device) ?

This has unfortunately happened to me several times, so I asked myself this question:

Is it possible to make a form (or a block of text, or content within an article) appear only in the mobile version or only in the desktop version of the site?

The answer is obviously YES!

Natively for Joomla this option does not exist, but a few lines of CSS will allow us to achieve this result without the slightest effort.

1. What do we need to achieve and what do we need?

  • Making our module X visible only in the desktop version of the site
  • Making our module Y (which can be X modified as appropriate) visible only in the mobile version of the site

2. Let us begin by modifying our CSS

First of all, we set these two parameters in our CSS file:

.hidden-desktop {display:none !important}

.hidden-mobile {display:block !important}

What do they mean?

Very simply we are saying that any element of class ".hidden-desktop" must be invisible in the desktop view of the site while any element of class ".hidden-mobile" must be displayed regularly.

At this point we have to define how the .hidden-desktop class module should behave depending on the width (in pixels) of the device that is looking at the site:

/* desktop con monitor largo: più di 1200 pixel */
@media (min-width: 1200px) {
.hidden-desktop {display:none !important}
}

/* per device con monitor larghi da 768 a 979 pixel: tablet orizzontali o desktop */
@media (min-width: 768px) and (max-width: 979px) {
.hidden-desktop {display:none !important}
}

/* tra 480 pixel e 767 pixel: tablet vari */
@media (max-width: 767px) {
.hidden-desktop {display:block !important}
}

/* Tutto ciò che ha un monitor più piccolo di 480 pixel: telefoni */
@media (max-width: 480px) {
.hidden-desktop {display:block !important}
}

What do these lines mean?

Quite simply if my viewport (current window width) is 768 pixels and up then it leaves the .hidden-desktop class element invisible; if my viewport is less than or equal to 768 pixels then it changes the visibility of the .hidden-desktop class element to block, i.e. visible.

In simple terms, what happened?

Simple: my CSS constantly adapts to the width of the window: if it is small it applies the third and fourth rules (visible element), if the window is large it applies the first two (invisible element).

3. The opposite case: make a class visible only in the desktop version?

The reasoning is the same, but the code will be as follows (in your CSS file you can write the two blocks of code one after the other)

/* desktop con monitor largo: più di 1200 pixel */
@media (min-width: 1200px) {
.hidden-mobile {display:block !important}
}

/* per device con monitor larghi da 768 a 979 pixel: tablet orizzontali o desktop */
@media (min-width: 768px) and (max-width: 979px) {
.hidden-mobile {display:block !important}
}

/* tra 480 pixel e 767 pixel: tablet vari */
@media (max-width: 767px) {
.hidden-mobile {display:none !important}
}

/* Tutto ciò che ha un monitor più piccolo di 480 pixel: telefoni */
@media (max-width: 480px) {
.hidden-mobile {display:none !important}
}

What do these lines mean?

Like the previous block of code, these lines define when the class is to be visible (display: block in the first two rules) or invisible (display: none in the last two rules).

4. Now that I have modified my CSS, how do I proceed?

At this point we need to assign the appropriate class to our Joomla modules.

You can do this step directly in the control panel --> extensions --> module management.

Click on the module you want to hide in the mobile version and, on the right-hand side, under the Advanced Options tab, add the class "hidden-mobile" to the module.

ATTENTION: Remember to leave a space in front of hidden-mobile, so that it does not 'stick' to other classes already present in the module, thus defeating your work.

Here you can see an example:

 

As you can see from the image, my module called "Our lines" is in position-7 and has the hidden-mobile class so it will only be visible when the viewport is large enough (i.e. when we are in desktop view).

Now let's duplicate our module and assign it a new position, like this:

 

 

Thus, our new module (called Our lines 2) will be in a new position (position-8) and will only be visible in the mobile version of the site.

5. Moral of the story?

Simple: are you in one of these situations?

  • Your template looks great on desktop but sucks on mobile...
  • Your modules look good in position-7 but overlap on the phone...
  • Your slideshow module is huge and doesn't look good on the phone, so you want to make it disappear...

With this CSS trick you will be able to decide which modules to display and where, depending on the device viewing your site.


If you liked this article, please share it!

share on facebook share on twitter share on linkedin
condividi su Facebookcondividi su Twittercondividi su LinkedIncondividi su WhatsAppcondividi su Telegram