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

Cheatsheet horizontal scrolling #40798

Open
3 tasks done
diafestivo opened this issue Sep 7, 2024 · 1 comment · May be fixed by #40799
Open
3 tasks done

Cheatsheet horizontal scrolling #40798

diafestivo opened this issue Sep 7, 2024 · 1 comment · May be fixed by #40799

Comments

@diafestivo
Copy link

diafestivo commented Sep 7, 2024

Prerequisites

Describe the issue

Hello,

In the "Cheatsheet" example, there seems to be some padding that causes horizontal scrolling on mobile resolutions.

It might seem like a minor issue, but it can be uncomfortable for many users.

Thank you, and congratulations on your great work.

Reduced test cases

The issue seems to be caused by content overflowing the width of the screen on mobile resolutions. A potential fix is to add the following CSS rule to prevent horizontal scrolling:

@media (max-width: 768px) {
    body {
        overflow-x: hidden;
    }
}

What operating system(s) are you seeing the problem on?

macOS

What browser(s) are you seeing the problem on?

Chrome

What version of Bootstrap are you using?

5.3.3

@julien-deramond
Copy link
Member

julien-deramond commented Sep 7, 2024

Thanks for reporting this issue @diafestivo!
I can also confirm the issue with Firefox on macOS.
I've tried a fix with #40799 but which handles only resolutions > 272px which is kind of small already.
Is it fixing your issue on your side?

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Projects
Status: Needs review
Development

Successfully merging a pull request may close this issue.

2 participants