• 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?

Jaxel

Well-known member
#1
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
#3
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
#4
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
#5
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
#6
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
#7
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
#8
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
#9
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
#10
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.