Add responsive code to template modification

[BassMan]

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:

<xen:if is="@enableResponsive">
@media (max-width:@maxResponsiveMediumWidth)
{
    <li>...my code...</li>
}
</xen:if>

I would be grateful for any help.

 

[Paul B]

There is no "mobile" flag.

Responsive design works on browser width, regardless of device.

 

[BassMan]

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.

 

[Paul B]

Yes, use a media query and display:none.

http://xenforo.com/community/resources/responsive-design.2193/

 

[BassMan]

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]

You're mixing HTML and CSS.

This is a media query in CSS:

@media (max-width:420px)
{

}

This is 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.:

<xen:require css="my_css.css" />

Or you can use CSS in <style> tags in HTML.

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

 

[BassMan]

I know I can't mix them together and that is want I wanted to know.

Thanks, Chis D!