Width of off-canvas-modals

Support
#1

Hi there.

I am trying to increase the width (small screens) of the off-canvas-modals on mohocon.com, for example:

.e8106-9.x-off-canvas .x-off-canvas-content { width: 85vw !important; }

This is not right / does not show. (Also tried max-width scenario). What am I doing wrong?

Thanks.

#2

Hello @nblund,

Thanks for writing in! :slight_smile:

On your media queries where you set this code in, please add display: block;

E.g.

 .e8106-9.x-off-canvas .x-off-canvas-content { 
       width: 85vw !important; 
       display: block;
  }

Let us know how it goes.

Hope it helps.

#3

Hi there.

So now I have:

.e11862-61.x-off-canvas .x-off-canvas-content {
max-width: 85vw !important;
display: block;
}

That doesn’t make it however. Any suggestions? Thanks

#4

Hi,

You need to make sure that this e11862-61 is the correct class.

You can check that using google chrome inspect element.

Hope that helps.

#5

Hi there.

It is, indeed, the correct class. For simplicity reasons I just showed you the css style for one modal - whereas my stylesheet lists every single class. Every class was checked prior to writing to you. And none of the modals work… What next?

Thanks

#6

Hi There,

Could you please try adding the my-off-canvas to your Off Canvas element?

Then update your custom CSS to this:

.my-off-canvas .x-off-canvas-content {
max-width: 85vw !important;
display: block;
}

Hope it helps :slight_smile:

#7

Thanks. Unfortunately, none of it helped so far. It seems that I cannot control the off-canvas-content at all but in the template element. I have really tried a lot - and yes, chances are that I am making a simple mistake, but sure can’t find it. Would you take a close look at it, please? Thanks.

#8

Hi,

Would you mind providing us with login credentials so we can take a closer look? Please provide following information:

Set it as Secure Note

  • Link to your site
  • WordPress Admin username / password

All the best!

#9

Hi,

I already did so in my previous response? Anyway, have done so again :slight_smile:

Thanks.

#10

Hi There,

Thanks for the info!

I have added this css to your global css and it works fine.

@media (max-width: 768px) {
  .x-off-canvas-content-left {
    max-width: 90% !important;
  }
}

Please check and confirm!

Thanks

#11

Hi there. That worked perfectly. So your solution would have been the first thing to try. The reason I didn’t is the previous answer from @nico, which said: The class for each off canvas CSS is very specific. You need to adjust its size one by one. Would you mind sharing us the exact canvas that you want to change." (https://theme.co/apex/forum/t/responsive-content-area-off-canvas/15681/4) Thanks.

#12

On behalf of my colleagues, you’re welcome. :slight_smile:

#13

This topic was automatically closed 10 days after the last reply. New replies are no longer allowed.