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

How would I put elements in my template that disappear during responsive?

Discussion in 'XenForo Development Discussions' started by Jaxel, Aug 2, 2013.

  1. Jaxel

    Jaxel Well-Known Member

    Topic...

    Lets say I have a DIV in my template, I want this DIV to disappear when someone is using a responsive browser like a cellphone... how is this possible?
     
  2. Brogan

    Brogan XenForo Moderator Staff Member

    <xen:if is="@enableResponsive">
     
    Chris D likes this.
  3. Chris D

    Chris D XenForo Developer Staff Member

    Search the default templates for @enableResponsive

    That will come up with a number of templates that contain responsive elements. This is normal CSS wrapped in media queries.

    The trigger points are various widths that are defined in style properties.
     
  4. Jaxel

    Jaxel Well-Known Member

    Wouldn't that only show the div if the skin has responsive enabled? Not if the responsive is currently being used?

    I want the div to show when a user is browsing on their PC, but when they are browsing on their cell, I want the div to go away.
     
  5. Brogan

    Brogan XenForo Moderator Staff Member

    Responsive is a flag and applies to the whole style.

    You would need to detect the browser agent if you want to do that.
     
    Chris D likes this.
  6. AndyB

    AndyB Well-Known Member

    To do that, I put this in my EXTRA.css template.

    Code:
    @media (max-width:@maxResponsiveWideWidth) {
      .div_to_hide_when_in_responsive {
        display: none;
      }
    }
    
     
    Last edited: Aug 2, 2013
    Pereira and Chris D like this.
  7. Brogan

    Brogan XenForo Moderator Staff Member

    That would still apply to all devices, not just mobile devices.

    Browser agent detection is required to only apply to mobile devices and not PCs.
     
  8. Jaxel

    Jaxel Well-Known Member

    That worked... thanks....
    Code:
    <xen:if is="@enableResponsive">
        @media (max-width:@maxResponsiveWideWidth)
        {
            #rightBox { display: none; }
        }
    </xen:if>
     
    Pereira likes this.
  9. Brogan

    Brogan XenForo Moderator Staff Member

    That's not what you asked for.

    That will still apply to a PC if the browser width is less than the max responsive width.
     
    Chris D likes this.
  10. Chris D

    Chris D XenForo Developer Staff Member

    Brogan is right.

    You're talking about it in terms of specific devices which isn't strictly accurate.

    Yes a phone has a small width, but so does my browser if I resize it downwards.

    It's important to make that distinction.
     
  11. AndyB

    AndyB Well-Known Member

    Happy to help.
     

Share This Page