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.

Joomla and PHP Output Buffering
 

Comments

No comments made yet. Be the first to submit a comment
Tuesday, 23 April 2024

Captcha Image