Remove Padding from Off Canvas Content

Support
#1

Hi,

I’m trying to remove the padding from the Off-Canvas content area. Currently, The padding squeezes the content on mobile devices. Is there a way to adjust the Off-Canvas padding?

Thanks,

#2

Hi There,

Thanks for writing in! To assist you with this issue, we’ll first need you to provide us with your URL. This is to ensure that we can provide you with a tailored answer to your situation. Once you have provided us with your URL, we will be happy to assist you with everything.

Thank you.

#3

No problem!

http://es.poplabstaging-4.com/

#4

Hi There,

Could you please try placing the following CSS media query into your Customizer, Custom > Edit Global CSS area.

@media (max-width:480px){
  .x-container.width {
    margin: 0 auto;
    width: 100%;
  }
}

Hope that helps.

#5

That didn’t seem to work.

I think there’s some padding on the .x-off-canvas-content that might be causing the issue. I don’t know how to remove or reduce the padding.

Thanks for the help!

#6

Hey there,

Are you using the HTML from the sample content like this.

The off canvas element has an unchangeable padding of calc(2em * 1)

The sample content inside the off canvas is enclosed with a div tag with an inline style padding of 25px. In my screenshot, I increased the padding to 50px thereby squeezing the content in very small screen widths.

You might have done the same. If not, please give us more details especially what page you added and off canvas element and screenshots of the issue.

Thanks.

#7

Hey Christian,

It’s that unchangeable padding for the off canvas content that I think is causing the issue.

The off canvas element can be found on all pages if you click on the calendar icon in the header when using a mobile device. I’ve also attached a screenshot.

Thanks!

#8

Hey there,

Sorry for the confusion. The padding is changeable. You need to edit the Close Size & Dimensions option under Off Canvas > Setup. The padding is mainly for the close button or the padding/space gives space for the button. If you set it too narrow like 10px, the padding will be thin but the close button will be small. If you set it to 0, there will be no padding but you’ll have no close button.

Thanks.

1 Like
#9

I’m having the same issue here. I’d like to remove the padding. I can do it via the inspector but I can’t target the selector to remove the padding via CSS. Only works if I add a <style> </style>inside the content area but then it shows the CSS between the style brackets on mobile.

#10

Here’s the CSS I’ve used to get it to work

div.x-off-canvas .x-off-canvas-content {
    max-width: 32em;
    padding: 0px !important;
    background-color: hsl(0, 0%, 100%);
}

Hope this helps, cheers!

#11

Hey There,

Thanks for updating this thread! We are just glad that you have figured it out a way to correct the said issue.
We appreciate for letting us know!

Best Regards.