Forum


HomeHomePremiumPremiumAdministrationAdministrationhide modules for small screen sizeshide modules for small screen sizes
Previous
 
Next
New Post
2/22/2016 5:33 AM
 

Hi Aderson

I have a site with an animated graphic that's not scaling down when viewed on a phone.  The skin is responsive.  I'm wondering if there is a way to set the module to "not show" when the window size goes below a certain number of pixels.  So on a desktop the graphic would display but on a phone it would be hidden.  Thanks

 

Chris

 
New Post
2/23/2016 4:07 AM
 

Hi Chris,

The easiest approach here would be:

1 - Wrap the image around a DIV tag;

2 - Set a class for this DIV. For instance class="hide-mobile";

3 - Then add to the Admin/Site Settings Style Sheet a Media query definition that would hide the div if it is on mobile. For instance:

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

.hide-mobile {

display: none;

}

}


Note: I recommend that you get familiar with media queries in case you are not yet:

https://css-tricks.com/snippets/css/m...

Cheers,

Aderson

 
Previous
 
Next
HomeHomePremiumPremiumAdministrationAdministrationhide modules for small screen sizeshide modules for small screen sizes



Try FREE
30 days money back guaranteed