• This site uses cookies. By continuing to use this site, you are agreeing to our use of cookies. Learn more.

Add responsive code to template modification

BassMan

Well-known member
#1
Hi!

I have some code in template modification like:

<li>.....</li>

I would like to add a code to work with responsive design.

Example:

how to make this code works only when I'm on my mobile?

I've tried with this, but it's not right:

Code:
<xen:if is="@enableResponsive">
@media (max-width:@maxResponsiveMediumWidth)
{
    <li>...my code...</li>
}
</xen:if>
I would be grateful for any help.
 
Last edited:

BassMan

Well-known member
#3
I understand. So it is not possible to show something only on small screens?

Example:

I want something to be shown on smallers screens and hidden on desktop.
 

BassMan

Well-known member
#5
I've looked at this resource, but still don't know if I can add this to template modification.

What is wrong with the code in my first post that is not working in template mod?
 

Chris D

XenForo developer
Staff member
#6
You're mixing HTML and CSS.

This is a media query in CSS:

Code:
@media (max-width:420px)
{

}
This is HTML:

HTML:
<li>...my code...</li>
You can't mix them together.

You need to include CSS in your template modification by calling a CSS template and placing your media query in there, e.g.:

Code:
<xen:require css="my_css.css" />
Or you can use CSS in <style> tags in HTML.

Code:
<style>
@media (max-width:420px)
{
    li
    {
        display: none;
    }
}
</style>
<li>...my code...</li>