Doesnt fit on mobile

Hi @caro93,

I can’t seem to open your website to have a look, is the URL ok?

regards Aert

@aahulsebos Yes. But I leave the link again. Thank you!

https://barbaro.mx/

• This reply was modified 4 years, 3 months ago by caro93.

Hi,
I have the same issue.
On mobile phone, I have a white margin on the right.
It seems due to the plugin.
My website : https://ataraxie-it.com

Regards
Pierre

• This reply was modified 4 years, 3 months ago by pierreb92.

Hi @pierreb92 @caro93,

I will look at both, will get back to you soon,

regards Aert

Hi @caro93,

Could you clear the Min width of banner in pixels under cookie banner settings, clear cache, and see if it works?

I have an example here without issues; https://s-qmkrcpycf25bl.eu1.wpsandbox.org/

regards Aert

Hi @pierreb92,

Could you try above as well? https://s-qb2n3xw9p25bl.eu1.wpsandbox.org/ this is the same template, but no issues.

Let me know,

regards Aert

@aahulsebos Thanks but it is not working still.

When I clear the min widht and save, it resets to default (476). I also clear cache but still looks bad in the mobile version…

@aahulsebos
Same issue than @caro93
When i clear, it resets 476.
I fill 2 wich is the smallest possible value.
After clear cache still the same issue on mobile

@caro93,

On your website, the page is wider than the screen when viewed on mobile. The banner takes a 100% width on mobile, but because your page does not fit on the screen, the banner takes the full width.

The element that is pushing the page to this width is an Elementor divider in a second Elementor section on the page. If I set it to “display:none”, the problem is gone.

It seems to be caused by padding on this element.

I can change it with this css:

.elementor-541 .elementor-element.elementor-element-2cffbb2 .elementor-divider{
  padding:0;
}

But a more generic css would be something like this:

#masthead .elementor-element.elementor-element-2cffbb2 .elementor-divider{
  padding:0;
}

This should keep the website within the screen on mobile, fixing the banner width as well.

@pierreb92

On your site something similar is happening, also with the elementor divider. The below css should prevent the divider from forcing the mobile website to become wider than the screen, fixing the banner width.

.elementor-widget-container .elementor-widget-divider {
    --divider-pattern-height: 0;
    padding:0 !important; /* either use important or more classes here */
}

@rogierlankhorst

Thanks for your help.
I tried with this CSS, but the problem remains.
Since it’s a problem with Elementor, maybe I should contact their support.

Regards
Pierre

@rogierlankhorst

Thank you! I found what Elementor Divider it was. It was one I had on the header so I could change the negative padding into neutral padding in the mobile view and it got fixed!! Thank you!

@rogierlankhorst @aahulsebos @caro93
I found the problematic section (Newsletter) and applied this Elementor support instruction https://elementor.com/help/horizontal-scrollbar-on-mobile-devices/
It’s ok for me.

Thanks all
Regards
Pierre