Dynamic Off Canvas Widths

Wappler General Need Help
1

On my app I have an offcanvas panel that I need to set to 25% width on desktop and 100% on mobile. Is that possible?

2

I know practically nothing of CSS, but have you heard about media queries?

I suppose it's how you can have different CSS rules for the same element, that depend on the user's screen size

I'm assuming you've exhaused the Bootstrap column options...

3

Here yo go Brad just add the class 'offcanvas-panel' to the div:

.offcanvas-panel {
  width: 100%; /* default for mobile */
}

@media (min-width: 768px) {
  .offcanvas-panel {
    width: 25%;
  }
}

Adjust as you require...

1 Like
4

Thanks Cheese! Yep, just asked AI (I should have done that first) and after a couple tries it came up with:

/* Responsive offcanvas width */
@media (min-width: 768px) {
    #dt_settings {
        width: 25% !important;
    }
}

/* Default width for mobile */
#dt_settings {
    width: 100%;
}
1 Like
5

I think the one @Cheese has given is a bit better since it doesn't require the !important keyword. The !important can cause problems later if you want to add for example an other size for very large displays.

1 Like