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

Discussion in 'XenForo Development Discussions' started by BassMan, May 23, 2014.

  1. BassMan

    BassMan Well-Known Member

    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: May 23, 2014
  2. Brogan

    Brogan XenForo Moderator Staff Member

    There is no "mobile" flag.

    Responsive design works on browser width, regardless of device.
     
    Chris D likes this.
  3. BassMan

    BassMan Well-Known Member

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

    Brogan XenForo Moderator Staff Member

    Chris D likes this.
  5. BassMan

    BassMan Well-Known Member

    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?
     
  6. Chris D

    Chris D XenForo Developer Staff Member

    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>
     
    HenrikHansen and Brogan like this.
  7. BassMan

    BassMan Well-Known Member

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

    Thanks, Chis D!
     

Share This Page