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

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?
 

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.
 

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.
 

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.
 

AndyB

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

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.
 

Jaxel

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;
  }
}
That worked... thanks....
Code:
<xen:if is="@enableResponsive">
    @media (max-width:@maxResponsiveWideWidth)
    {
        #rightBox { display: none; }
    }
</xen:if>
 

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

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