Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Fix horizontal scroll issue on mobile #156

Open
wants to merge 1 commit into
base: master
Choose a base branch
from

Conversation

andys8
Copy link
Contributor

@andys8 andys8 commented Feb 3, 2023

Solution

Solution taken from https://stackoverflow.com/a/36380425

Fixes #154

Demo

screencast-2023-02-03_13.06.29.mp4

@andys8
Copy link
Contributor Author

andys8 commented Feb 6, 2023

@JordanMartinez Also merge this one? Or any open questions or information I could provide?

@JordanMartinez
Copy link
Contributor

Why is the page overflowing in the first place?

@andys8
Copy link
Contributor Author

andys8 commented Feb 7, 2023

I think part of it, is that .row has negative margin in bootstrap. However, this isn't the full story. Using bootstrap classes as they were intended will likely not cause this issue. But mixing these with other css classes that change paddings and margins, can cause this.

image

screencast-2023-02-07_11.16.58.mp4

To be clear: Removing the values of bootstrap like shown in this video, is not the solution.
Proper solution would be to find out, what exactly needs to be adapted. Which will likely change the looks, and lead to more changes. The easier, but less idiomatic alternative is to throw overflow hidden on the problem.

image

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

Successfully merging this pull request may close these issues.

Fix horizontal scrolling / width on mobile
2 participants