Problem/Motivation

In bs_bootstrap/sass/layout/partials/_footer.scss we have a rule on line 143:

  // For bigger screens we will remove margin top for all blocks.
  @include media-responsive-breakpoint-up() {
    .block__title,
    .field--name-body > h3:first-child,
    .field--name-body > h4:first-child {
      margin-top: 0;
    }
  }

However, using `media-responsive-breakpoint-up()` call here is wrong because on line 54 we are using `md` breakpoint which is controlling column switching for a footer region

      @include media-breakpoint-up(md) {
        flex: 1;
        width: auto;
      }

Proposed resolution

We should use `media-breakpoint-up('md')` instead of `media-responsive-breakpoint-up()`.

CommentFileSizeAuthor
#6 interdiff-3120026-5-6.txt790 bytespivica
#6 use-different-default-variable-3078278-6.patch1.37 KBpivica
#5 use-different-default-variable-3078278-5.patch1.24 KBpivica
#5 interdiff-3120026-2-5.txt907 bytespivica
#4 use-different-default-variable-3078278-4.patch1.16 KBpivica
#4 interdiff-3120026-3-4.txt620 bytespivica
#3 interdiff-3120026-2-3.txt616 bytespivica
#3 use-md-for-footer-title-margin-reset-3120026-3.patch1.05 KBpivica
#2 use-md-for-footer-title-margin-reset-3120026-2.patch761 bytespivica

Comments

pivica created an issue. See original summary.

pivica’s picture

pivica commented
StatusFileSize
new use-md-for-footer-title-margin-reset-3120026-2.patch761 bytes

Here is a patch.

pivica’s picture

pivica commented
StatusFileSize
new use-md-for-footer-title-margin-reset-3120026-3.patch1.05 KB
new interdiff-3120026-2-3.txt616 bytes

We also need to fix IE11 block collapsing in the footer because of column flex direction.

pivica’s picture

pivica commented
Status: Active » Needs review
StatusFileSize
new interdiff-3120026-3-4.txt620 bytes
new use-different-default-variable-3078278-4.patch1.16 KB

Previous IE11 fix now requires limiting max-width.

pivica’s picture

pivica commented
StatusFileSize
new interdiff-3120026-2-5.txt907 bytes
new use-different-default-variable-3078278-5.patch1.24 KB

After more checking i think i overdo this a bit, flex column direction in the footer is more a custom thing and not set by default, will move this part to custom project and revert this to the first patch.

Additionally, tests are shows that we need stronger margin bottom reset for to-top bs_lib blocks and applying of region flex display only smaller screens and above (because we want to activate margin collapsing for extra small screens which are always in one col layout for this size).

pivica’s picture

pivica commented
StatusFileSize
new use-different-default-variable-3078278-6.patch1.37 KB
new interdiff-3120026-5-6.txt790 bytes

It seems we do need margin collapsing for small screens also because usually, we are still on one column layout, adjusting patch to this fact.

pivica’s picture

pivica commented
Title: Breakpoint value for footer block title reset should be md » Footer block vertical responsive layout fixes

  • pivica committed 95ef2e8 on 8.x-1.x 
    Issue #3120026 by pivica: Footer block vertical responsive layout fixes
pivica’s picture

pivica commented
Status: Needs review » Fixed

Committed.

Status: Fixed » Closed (fixed)

Automatically closed - issue fixed for 2 weeks with no activity.