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

[ForumHeroes]

ForumHeroes submitted a new resource:

Show or hide a template or content for mobile only - A guide on how to show or hide a template or even content to a mobile device.

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.

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

Read more about this resource...

 

[Paul B]

Didn't see this listed as a guide already

This guide covers responsive design: https://xenforo.com/community/resources/responsive-design.2193/

The title of this guide is misleading as it's not related to mobile devices specifically - the CSS applies to any device, it relates to (browser) viewport width.

 

[ForumHeroes]

This guide covers responsive design: https://xenforo.com/community/resources/responsive-design.2193/

Oh it appeared to me it was only how to add more CSS to a CSS file. I didn't see anything on how to call to a comment or template. If this is too much of a duplicate, feel free to delete.

The title of this guide is misleading as it's not related to mobile devices specifically - the CSS applies to any device, it relates to (browser) viewport width.

True, didn't think of it that way til you mentioned it. I wanted to call to a Widget Framework template on my site to only show to mobile devices and wrote how how I did it afterwards. Didn't consider people using a desktop with a width smaller then 300.

 

[ForumHeroes]

Updated the title

 

[Paul B]

If this is too much of a duplicate, feel free to delete.

Not at all.
I just wanted to point out that a general guide to using media queries already existed.

There's no problem with having multiple guides which cover similar content and ultimately it benefits the members if they can find answers to questions they may have.

 

[tsak76]

Not at all.
I just wanted to point out that a general guide to using media queries already existed.

There's no problem with having multiple guides which cover similar content and ultimately it benefits the members if they can find answers to questions they may have.

how exactly can i show contect ONLY in a mobile device, i cant make it work