Show or hide a template or content based on browser viewport width

Bi0S · 22-06-2017, 08:55 PM

Show or hide a template or content based on browser viewport width

Compatible XF Versions:

1.0
1.1
1.2
1.3
1.4
1.5

Didn't see this listed as a guide already, so wanted to share a guide on how to show or hide a template or even content to a mobile device.

First to display a template for mobile only, open the template you want to include the content in and place this code where you want to display the template you want to call to.

Code:
<div class="XFmobileShow">
 <xen:include template=" Template To Show Only On Mobile " />
 </div>

If you rather just show content direct, rather then call to a different template, simply use the following instead.

Code:
<div class="XFmobileShow">
 Put some content to display here.
 </div>

Save your template and exit.

Now go into template extra.css and paste the following into it.

Code:
.XFmobileShow { display: none;}
 
   @media only screen
   and (min-device-width : 300px)
   and (max-device-width : 743px)
   {
   .mobileShow { display: inline;}
   }

Save and exit.

You now are displaying content only a mobile device can view!

Ok, so you want to only show content to a non-mobile device because it is too wide for a mobile screen? Here is how.

First, open the template you want to include the content in and place this code where you want to display the template you want to call to.

Code:
<div class="XFmobileHide">
 <xen:include template=" Template To Hide Only On Mobile " />
 </div>

If you rather just show content direct, rather then call to a different template, simply use the following instead.

Code:
<div class="XFmobileHide">
 Put some content here
 </div>

Save your template and exit.

Now go into template extra.css and paste the following into it.

Code:
.XFmobileHide { display: inline;}
 
 @media only screen
   and (min-device-width : 300px)
   and (max-device-width : 743px){ 
   .XFmobileHide { display: none;}
   }

Save and exit.

You now are displaying content that a mobile device can't view!

Enjoy!

Show or hide a template or content based on browser viewport width

Submitted by Bi0S, 22-06-2017, 08:55 PM, Thread ID: 38064