Hide modules

http://www.scriptureceramics.co.za/

Hi, I have 2 questions.

1. How do I hide a module in mobile and tablet view but NOT from desktop view?
2. My logo is NOT responsive, can it be and how do I do it?

Running the Joomla 3 template.

Thanks

About showing and hidding modules on particular "devices" you can read here:
http://www.gavick.com/documentation/gen ... et-layout/

To make the logo responsive - you would need to use override.css and some media-queries - do you know anything about them?

Thanks, I managed to hide the module but don't know how to make the logo responsive...

Ok, then few words about media-queries.
They are used to apply custom css when browser size changes.
If you check your site sourcecode you will see this code:

Code: Select all

<link rel="stylesheet" href="http://www.scriptureceramics.co.za/templates/gk_storebox/css/small.desktop.css" media="(max-width: 1100px)" />
<link rel="stylesheet" href="http://www.scriptureceramics.co.za/templates/gk_storebox/css/tablet.css" media="(max-width: 1030px)" />
<link rel="stylesheet" href="http://www.scriptureceramics.co.za/templates/gk_storebox/css/small.tablet.css" media="(max-width: 820px)" />
<link rel="stylesheet" href="http://www.scriptureceramics.co.za/templates/gk_storebox/css/mobile.css" media="(max-width: 580px)" />


All it does - it loads additional css files when browser width is less than width given in max-width parameter.
So to make things short - you resize width down, with each step one more css is being used and overrides definitions implemented in previous ones (not all, just some).

So to create your responsive logo you could edit those css files, but when you will update the template one day it will cause some trouble.
Better way is to use override.css and media queries.

Code: Select all

@media (max-width: 8100px) {
#gkLogo.cssLogo {
background: transparent url('../images/logo-small-desktop.png') no-repeat 0 0;
height: 60px;
width: 408px;
}
}
@media (max-width: 1030px) {
#gkLogo.cssLogo {
background: transparent url('../images/logo-tablet.png') no-repeat 0 0;
height: 60px;
width: 408px;
}
}
@media (max-width: 820px) {
#gkLogo.cssLogo {
background: transparent url('../images/logo-small-tablet.png') no-repeat 0 0;
height: 60px;
width: 408px;
}
}
@media (max-width: 580px) {
#gkLogo.cssLogo {
background: transparent url('../images/logo-mobile.png') no-repeat 0 0;
height: 60px;
width: 408px;
}
}


What it does - it loads different image on every step. The only thing you need to do is to create different size logos with names given in background declaration, and override given width and height to make the logo smaller with each size step.

Whats more interesting - you don't need to create them all - You can skip any of media-queries resolution steps, this way "bigger" logo will work in as long as next media-query definition will not override it.

Hi there,

I'm trying to make my logo responsive with exactly the same way as you described, adding override on css and creating another image, but unfortunately it's not working. I have enabled the override on the template, i don't know what else i can do.

You can share your site's url so I can check whats wrong .