Drupal region padding in _layout.scss does not integrate with Bootstrap vertical rhythm

Created on 13 January 2022, over 3 years ago
Updated 4 April 2023, over 2 years ago

Bootstrap runs its own smart space management where all container, row and col margins and paddings perfectly work in vertical rhythm with each other to keep being in line, if the markup has been used correctly. Adding additional region padding the Drupal region markup interrupts this vertical rhythm and causes the main content to be not vertically in line with the header nav.

To perfectly use the Bootstrap concept it is recommended to NOT ADD ANY spacing to Drupal markup at all and leave it to the Bootstrap grid. Especially when the user tries to change Bootstrap spacing or uses a Bootstrap styling engine the custom spacing will not work with it at all.

CSS like this (and possible other parts) in _layout.scss

.region-sidebar-first, .region-sidebar-second, .region-footer, .region-content {
    padding: 0 0.5 rem;
}

... should be strongly avoided.

🐛 Bug report
Status

Active

Version

3.0

Component

Code

Created by

🇫🇷France dqd London | N.Y.C | Paris | Hamburg | Berlin

Live updates comments and jobs are added and updated live.
Sign in to follow issues

Comments & Activities

Not all content is available!

It's likely this issue predates Contrib.social: some issue and comment data are missing.

  • 🇫🇷France dqd London | N.Y.C | Paris | Hamburg | Berlin
  • 🇫🇷France dqd London | N.Y.C | Paris | Hamburg | Berlin
  • 🇫🇷France dqd London | N.Y.C | Paris | Hamburg | Berlin

    This patch version applies against latest 3.0-dev and set $region-padding default to 0 and removes the already rendered css regarding this variable from the compiled styles.css. I think this is the best attempt with the most flexibility so the user can later decide to increase it again if required and recompile. But the default should definitely be 0 to go with the flow of Bootstrap grid and vertical rythm, IMHO.

  • Status changed to Needs review over 2 years ago
  • 🇫🇷France dqd London | N.Y.C | Paris | Hamburg | Berlin
  • 🇬🇧United Kingdom chris5156 London

    I'm not sure the .region classes listed above are the only place where extra padding has been added. I am also seeing that .footer has been set to have padding 2rem 0 which is adding lots of white space above and below anything with the class "footer".

    Another unexpected change is that .navbar-brang img now has a fixed height of 60px, which I cannot understand - is this another change new to the .scss files?

    Strictly speaking all of this can be worked around in my subtheme by changing the values of the variables referenced in the various .scss files, but that should surely not be necessary to adapt to a minor new version of this theme.

  • 🇦🇺Australia jannakha Brisbane!

    review on v4

  • 🇦🇺Australia jannakha Brisbane!
Production build 0.71.5 2024