Changing --bs-gutter-x create an overflow issue on mobile
Created by: MathieuAlphamosa
Prerequisites
-
I have searched for duplicate or closed issues -
I have validated any HTML to avoid common problems -
I have read the contributing guidelines
Describe the issue
Changing CSS variable --bs-gutter-x
on the row component like this:
.row {
--bs-gutter-x: 2rem;
}
cause an overflow issue on mobile (x axis). See test case for a demo.
This might be related to this:
--bs-gutter-x
is used in container component without being defined previously.
.container,
.container-fluid,
.container-xxl,
.container-xl,
.container-lg,
.container-md,
.container-sm {
width: 100%;
padding-right: var(--bs-gutter-x, 0.75rem);
padding-left: var(--bs-gutter-x, 0.75rem);
margin-right: auto;
margin-left: auto;
}
Note that it should be padding-right: calc(var(--bs-gutter-x, 1.5rem) / 2);
anyway... or am I missing something?
Not sure if it should be fixed, but it should be explained in the documentation as it's complicated overflow issue to tackle.
Reduced test cases
https://codepen.io/mathieualphamosa/pen/LYjygme
What operating system(s) are you seeing the problem on?
macOS
What browser(s) are you seeing the problem on?
Chrome, Safari
What version of Bootstrap are you using?
v5.1.3