How to hide module on mobile devices in responsive templates

Hi,

I was wondering how I hide a module on mobile devices in your responsive templates? Earlier with mobile layouts and use of specific mobile menus to use on mobile platforms, it was easy to unassign a module from displaying when using the mobile menu.

As I understand it, in bootstrap-based templates, its a matter of assigning a css class to the module telling framework which resolutions to display the module. But does anyone have ideas on how to do this in Gavick's responsive templates, preferably without use of thirdparty plugins like "Module Anywwhere" and similar?

I am currently working with Bikestore template, but I guess it the same challenge with all templates

Cheers,
Zorroson

Most Gavick Modules uses following or similar combination as an id element in html.

Such as : nsp-nsp_(+ModuleID)
In html you will see following.

Code: Select all

<div id="nsp-nsp_487"


So in mobile.css you can add below which will hide module id 487 only.

Code: Select all

#nsp-nsp_487 { display: none;}


For other modules I am afraid you have to hide the position itself such as below in mobile.css

Code: Select all

#gkTop1 { display: none;}


Please note these will hide them in general not in specifix pages.

There are more ways to hide such as using php to identify which page you are on then add the css but obviously that is more difficult then simply using third party component such as modules anywhere.

See you around...

Norman,

Thank you very much for these pointers!
I think hiding the positions using CSS will do just fine for my purpose, and will try it out asap

Cheers,
Zorroson

No problem at all, see you around...