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

[Jaxel]

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?

 

[Paul B]

<xen:if is="@enableResponsive">

 

[Chris D]

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]

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.

 

[Paul B]

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]

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.

@media (max-width:@maxResponsiveWideWidth) {
  .div_to_hide_when_in_responsive {
    display: none;
  }
}

 

[Paul B]

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]

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

@media (max-width:@maxResponsiveWideWidth) {
  .div_to_hide_when_in_responsive {
    display: none;
  }
}

That worked... thanks....

<xen:if is="@enableResponsive">
    @media (max-width:@maxResponsiveWideWidth)
    {
        #rightBox { display: none; }
    }
</xen:if>

 

[Paul B]

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]

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.

 

[AndyB]

That worked... thanks....

Happy to help.