Need Joomla hosting crafted with care and expert 24/7 support? Start Here!

7.1 - Mobile Modules

Video Tutorial on How to Show/Hide Modules on the Mobile Version of Your Site

Click CC to enable subtitles

Video Transcription

One of the great new features of Joomla 3 is that it is responsive. This means that it will work no matter what size of web browser you have. Whether you are on a desktop computer a laptop or even a mobile phone or a tablet. The default template we've been using is also responsive which means that the front end of our web site will also look great on a mobile device.

There's may ways you can test this. Obviously the easiest way is to have a mobile device of your own to load up the web site. If you don't have that handy you can just go to the front end of your web site and resize your browser window. You can see now this is how it will look on a mobile phone. Or you may have some software for your browser that lets you see multiple layouts in one go.

I'm using something called the Web Developers Toolbar which lets me see my website as a Mobile portrait or landscape as a tablet and a large tablet in both portrait and landscape. As you can see your web site is actually working so you can really see exactly what happens when you click on a link. Now you may have noticed in the Mobile portrait view that when I scroll down that big image is really huge now on a mobile and it's probably not suitable.

Because this web site and Joomla 3 use something called Bootstrap to give it its responsive layouts. we are able to hide this large image from the mobile view. To do this lets go to our web site and go to our Module Manager and select that Long Image. If we got the Options and Advanced Options If we enter some special Bootstrap in the Module Class Suffix of space hidden phone and press save. Then return to our web site and refresh we can see that that long image is still there. But when we resize or view the site in a mobile browser we can see the image has gone. That's great but what about if we want to replace that image with something just for the mobile browser. We can do that as well. If we return to our administrator.

The first thing I am going to do before closing this module is scroll down and in the Note I am going to leave a note to say hidden on mobile. And click Save & Close. If we scroll down you can now see that note is there. This is particularly useful if the new module has the same name. Now I am going to create a new module again Custom HTML.

I am going to give it a name of Small Right Put it in exactly the same position which was Position-7 put a note to say hidden on desktop Go to my Custom output and insert an image that is more suitable for a mobile view. I've prepared the image already so lets just click on Upload browse to the file click on Upload. Here we can see a squarer version of that image. Select it Insert our ALT text and then click Insert. Now if we go to the Options and Advanced Options and insert the special code of space hidden dash desktop and click Save & Close.

We can see now there is the module we just created with the note hidden on desktop. If we go to our web site and refresh the page you can see nothing has changed. We still have our big long image. But when we resize the screen into our small size and scroll down the big one has gone and the little one is there instead.