Hide or show joomla modules in responsive design


Author Message
Andreas

Posted: 10/3/2012
Quote message 

Hey guys.

Even though Artisteer 4 makes responsive design, not all modules are responsive, so i needed to make two different layout versions of some modules, and then determen which module to show in screen mode and which to show in responsive mode. Here is how I did that:

First i made two module-suffixes to add in the module-parametres:
1. -not-responsive
2. -just-responsive

All I have to do is adding one oft the two in the module class suffix area of the modules.

In my artisteer template I added this code:

----------------------------------------------------------------

/*Do not show if responsive*/

.responsive .clearfix-not-responsive{
display:none;
}

.responsive .art-post-not-responsive{
display:none;
}


/*Only show if responsive*/

@media only screen
and (max-width : 1000px) {

.clearfix-just-responsive{
display:true;
}
.art-post-just-responsive{
display:true;
}

}


@media only screen
and (min-width : 1000px) {
.clearfix-just-responsive{
display:none;
}
.art-post-just-responsive{
display:none;
}

}
------------------------------------------------------------------------

This only works with some modules, but if it doesent work on your side, simply add more style-options to the script.

I hope it may come in handy.

Andreas
http://www.dialecta.no
 
Dave B

Posted: 3/17/2014
Quote message 

Or this

http://www.pluginaria.com/responsive-module-rerouter.html
 
RENE AOKI

Posted: 7/29/2014
Quote message 

HI! where do you
make this module-suffixes to add in the module-parametres:???
1. -not-responsive
2. -just-responsive
 
Ringo7

Posted: 9/11/2014
Quote message 

Quote Andreas:

Hey guys.

Even though Artisteer 4 makes responsive design, not all modules are responsive, so i needed to make two different layout versions of some modules, and then determen which module to show in screen mode and which to show in responsive mode. Here is how I did that:

First i made two module-suffixes to add in the module-parametres:
1. -not-responsive
2. -just-responsive

All I have to do is adding one oft the two in the module class suffix area of the modules.

In my artisteer template I added this code:

----------------------------------------------------------------

/*Do not show if responsive*/

.responsive .clearfix-not-responsive{
display:none;
}

.responsive .art-post-not-responsive{
display:none;
}


/*Only show if responsive*/

@media only screen
and (max-width : 1000px) {

.clearfix-just-responsive{
display:true;
}
.art-post-just-responsive{
display:true;
}

}


@media only screen
and (min-width : 1000px) {
.clearfix-just-responsive{
display:none;
}
.art-post-just-responsive{
display:none;
}

}
------------------------------------------------------------------------

This only works with some modules, but if it doesent work on your side, simply add more style-options to the script.

I hope it may come in handy.

Andreas
http://www.dialecta.no



Thanks Andreas. Works great!
 
Delia

Posted: 10/1/2015
Quote message 

Add:

.responsive-phone .hidden-phone {
display:none!important;
}

.hidden-desktop {
display:none;
}

.responsive .hidden-desktop {
display:block!important;
}

.responsive-phone .hidden-phone {
display:none!important;
}

.hidden-desktop {
display:none;
}

.responsive .hidden-desktop {
display:block!important;
}

.responsive-tablet .hidden-tablet {
display:none!important;
}


to the end of template.css and use <space>hidden-desktop/tablet or phone depending on your needs. TO make it very clear there is a space before it, but no period mark.