[Resolved] Content slides sideways out of frame on mobile

[Carsten]

Hi there, when using GeneratePress on mobile devices, it is possible to slide the content sideways out of the frame, which does not occur with other themes I tested like Twenty Nineteen.
It is a nuisance on mobile because the content is not fixed. It is not the page back and forward slide option, but a 10px off frame.

I received this response from the WPMobile.app developer:
‘This is the same if you open the website in a regular smartphone browser.
You should fix this problem first, it’s related to your website theme.’

I send you login information in an account message.

Regards
Carsten

[David]

Hi there,

you have added this CSS which is causing the content to break out of the container.

.site-content {
    margin-right: -20px; !important;
    margin-left: -20px; !important;
}

[Carsten]

Hi David, have you seen the links to the screen shot videos? This has nothing to do with the margin settings, as far as I can see. If I activate themes like Twenty Nineteen or Vantage, with this css the issue is not there.

The issue was there prior to the added css, but I will delete the css within an hour to test if this is causing it.

Regards
Carsten

[Carsten]

This issue will not be revealed in the inspector simulating mobile device, but only in my mobile browser on iPhone.

[David]

I use mobile dev tools so it is on a real device, an iPhone 7 in my case.
You can use this CSS that blocks any horizontal overflow:

html, body {
    overflow-x: hidden;
}

[Carsten]

Hi David, I have to admit that you were right about the margin css code 😉

The issue disappeared when deleting the code snippet.

What I was trying to achieve was a zero margin only on mobile on all pages, so all content fills out to the edges of the screen.

How do I achieve that?

Would this the right media query: @media screen and (max-width:767px)

Thanks

[Carsten]

Is it also possible to block zooming, to have the genuine app behavior and feel?

[David]

Awesome, glad thats sorted.
you may want to check the padding you have set in the Customizer > Layout > Container, this is what creates the space around the content on the non elementor pages.

This article on locking down zoom may help – not something i have used though, its generally frowned up as some users may need to zoom for better accessibility:

https://stackoverflow.com/questions/29376761/disabling-zoom-meta-tag

[Carsten]

Thanks David, you have been most helpful!

No need to add extra css, GeneratePress has it all, out of the box, you just have to know where to look for it.

Regards
Carsten

[David]

You’re welcome. Glad to be of help.

[Carsten]

Hi again, I am experiencing a strange behavior of on of the pages, It’s the messages page, which still slides sideways.

Any clues why one page still behaves like this and the rest are fine?

Regards
Carsten

[David]

Could you edit your original topic and change the Site URL to the page where the problem is. Just so i am looking at the right one.

[Carsten]

Yes, du you also need the account information send again?

[David]

Try this:

.buddypress-wrap .subnav-filters.bp-messages-filters ul {
    margin-left: 0;
}

[Carsten]

Suggestion, would it be possible to add a private reply button in here, so it was possible to add login information without having to fill out an Suggestion, would it be possible to add a private reply button in here, so it was possible to add login information without having to fill out an account issue form?

[Author]

Posts