Responsive custom HTML modules

Author

Message

Shaharin Yussof

Posted: 7/15/2015

I've been trying to hide custom HTML modules using a method described elsewhere in the forums using -not-responsive and -just-responsive custom classes, and this works for bona-fide modules but does not work at all if you're using custom HTML modules.

The element information that comes out for these objects is

div.art-block.clearfix-not-responsive
div.art-blockcontent
div.custom.hidden-not responsive

and when matched with the following CSS

@media only screen
and (max-width : 497px){
.responsive .clearfix-not-responsive{ display:none; }
.responsive .art-post-not-responsive{ display:none; }
.responsive .custom-not-responsive{ display:none; }
}

as suggested elsewhere but does NOT hide the custom HTML modules in responsive mode. I've also tried the " hidden-phone" method that has been suggested elsewhere, but apparently Artisteer doesn't actually support it.

Any suggestions?

Ian Shere

Posted: 7/20/2015

Quote message

Artisteer does support hidden-phone - I use it now on almost every site. Also hidden-desktop and hidden-tablet.

Have you added the extra CSS to template.css to actually do this? I have this code added to every template I make:

.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;

}

Luis Lara

Posted: 2/22/2017

Quote message

Thank you Ian, your code is very useful.