Joomla 3 hide module just for mobile devices

Question

I working on my new site in Joomla 3 with mobile ready theme. Can somebody tell me please, how I can hide few modules for mobile device (iPhone, etc...) visitors? I have a long banners in two modules, what is looks nice if visiting that site with computer browser. But how I can hide this modules if somebody visiting my site with mobile device? Is too long and broke a nice view...

Solution 1

In the new version of bootstrap there is a new css names for hidding modules, check it on http://getbootstrap.com/css/

For example: "hidden-xs" stands for the old "hidden-phone"

But if you still have a truble and "hidden-phone" nor "hidden-xs" works. You can add this class by yourself:

Add this code to one of your Css files (your style.css or your custom.css):

    @media (max-width : 768px) {
  .hidden-phone {
        display: none;
  }
}

Then follow the advise above and add module class suffix to desired module.

When editing the module, go to Options -> Advanced Options and look for a box to add a "Module Class Suffix". Add " hidden-phone"

Solution 2

Assuming that your template is using Bootstrap (and most 3.0 templates will be), you can just add a special class to the module to hide it for phones. When editing the module, go to Options -> Advanced Options and look for a box to add a "Module Class Suffix". Add " hidden-phone" (space is important at the start since some modules don't put it there for you...) to hide for screen sizes less than 767px. Add "hidden-tablet" as well to the list (also separated by a space) if you want to hide it as well for 767px to 979px widths.

Solution 3

I don't know if this is the best solution but it's a solution that I have now in mind.

You can use the JBrowser class

$browser = JBrowser::getInstance(); $browser->isMobile()

it returns a boolean value.

You can hide the modules from the template directly.

Comments

[Valentin Despa]

I would like to point out that technically the module will still be loaded (I mean your users may noticed that on their mobile devices when using a mobile network). So the page will not be lighter.