Latest news for Small Business Owners

How do you keep up to date with new ideas, new technology & market changes?
Do you have time to scour the web looking for new ideas & the next best thing to add to your website?
You want the latest news about your company & industry news all in one easy-to-access place.
1 minute reading time (171 words)

Hiding modules for responsive Joomla designs

If you use gantry 5 for your website templates, an extremely useful feature, available via Bootstrap, is the collection of responsive utility classes that can be used to help tweak layouts by providing a simple method of showing or hiding modules. 

Insert the following module class suffixes into your module settings to show/hide a module for a particular mode.

ClassPhones (<= 767px)Tablets (768-959px)Desktops (960-1199px)Desktops (>= 1200px)
visible-phoneVisibleHiddenHiddenHidden
visible-tabletHiddenVisibleHiddenHidden
visible-desktopHiddenHiddenVisibleVisible
visible-largeHiddenHiddenHiddenVisible
hidden-phoneHiddenVisibleVisibleVisible
hidden-tabletVisibleHiddenVisibleVisible
hidden-desktopVisibleVisibleHiddenHidden
hidden-largeVisibleVisibleVisibleHidden


As an example, if you wish to have a login module appear on desktop and tablet devices, but not necessarily phones, you can place hidden-phone in the Module Class Suffix field. This will allow the module to remain visible on any device displaying the page at a width above 768, allowing you to maintain the look you wish to achieve across multiple device types. 

×
Stay Informed

When you subscribe to the blog, we will send you an e-mail when there are new updates on the site so you wouldn't miss them.

What will your website designer expect from you?
Joomla and PHP Output Buffering
 

Comments

No comments made yet. Be the first to submit a comment
Saturday, 27 July 2024

Captcha Image