[Resolved] The right margin of the container does not fit correctly on movile version

[Ivan]

Hi,
First of all I have GeneratePress theme 3.0.2 and GeneratePress Premium 1.12.2

In the mobile version of my website http://emcolimpiezas.es, the right margin of the container does not fit correctly on the mobile. With your finger you can go right and left, which is not correct.

I was looking at the container settings (margin and padding) but I haven’t been able to fix it.

I don’t know if I explain myself, that’s why I am attaching a screenshot.
https://www.screencast.com/t/x2QMNdfP

Thx,
Ivan

[David]

Hi there,

the Footer you have constructed in Elementor, the Widget containing the image has lots of negative Margin applied to it. Remove the negative margins to resolve the issue.

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/

[Ivan]

Hi @David,

You were right, modifying the margin of the image has fixed the space.
The “Services” tab continued to have this margin and I cannot locate it, I have not seen any negative margin.
Can you tell me this?

[David]

The custom CSS you have for setting the mobile logo background color and size.
Change it to this:

#mobile-header .navigation-branding, #mobile-header .site-logo.mobile-header-logo {
    flex: 1 0 100%;
    justify-content: center;
    background: #f2e0bf;
    margin-left: 0;
    margin-right: 0;
}

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/

[Ivan]

David I don’t understand you.
In the whole web page the margin works correctly, but in the “Services” tab that margin still exists.

I have modified the CSS with which you indicate but the “Services” tab remains the same.

[David]

I am not seeing the issue now – can you try clearing your browser cache.

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/

[Ivan]

I have clean the cache, but it remains the same. I have also tried another browser, but the margins are still there.

I’m talking about how it looks on Mobile.
https://www.screencast.com/t/ltas52YE

[Tom]

Hi there,

It must be something within the content of that page.

You can do this to prevent it:

body, html {
    overflow-x: hidden;
}

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/
Ongoing Development: https://generatepress.com/ongoing-development

[Ivan]

@David, @Tom thanks you! 🙂
The problem I think is my mobile. I just tried two other mobiles and they work fine

Sorry for wasting time with me..

[Tom]

No worries – glad it’s working! 🙂

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/
Ongoing Development: https://generatepress.com/ongoing-development

[Author]

Posts