Back to Blog
Artisteer joomla tutorial6/5/2023 ![]() On the screen resolutions larger than 480px it display normally with no change to the appearance.Īs you can see from the grab below the slogan has been hidden on the smaller screen however the rest of the page remains intact. In the example below I applied the modulehide suffix to the banner slogan with the text that reads "The Responsive Joomla Templates is the new. If the module you want to hide carries content that will significantly impair the loading time on a mobiel device then you may need to iomplement a different solution for hiding modules on mobiel browsers. This is really more of a hack in that the content of the module still gets loaded on small screens and mobile devices but depending on the content itself this won't have too many consequences. So when we implement the changes to the css and then apply the module class suffix to our targetted module we get a module that displays on all screens larger than 480px and is hidden on screens smaller than 480px. You don't need to add the quotation marks but I have done so to highlight the space preceding the mobilehide text. ![]() The next part is to go to the module you want to hide on small screens and add the module class: " mobilehide". moduletable.mobileclass gets picked up properly and renders as another class in the html: mobilehide class in other non mobile contexts. This is important as it means that we can keep the use of the module in question flexible and not necessarily tether the module to the. mobilehide part of the css rule above is a class and does not attach directly to the moduletable statement. * Mobile Portrait Size to Mobile Landscape Size (devices and browsers) only screen and (max-width: 480px) In the Zen Grid Framework you can add it to the css/theme.css file or in the default Joomla templates css/template_css.css file. The following css can be added to any css file that gets included on the page. The following is a really simple hack that allows you to hide certain modules on small screens using the magic of media queries combined with a module class suffix. ![]() It always feels a little bit like cheating to use display: none in any css declaration, but its such an easy and useful tool that sometimes it's the best (read easiest) way to add some flexibility to the way certain content gets displayed on the page.Īs you are probably already aware, the Joomla module class suffix system is a seriously powerful system and in my opinion really underpins Joomla templating and opens up a world of flexibility and configuration for the end user. ![]()
0 Comments
Read More
Leave a Reply. |