Spacing breakpoint overrides

[vladblindu]

Hello guys,

Css isn't definitely my thing, so please excuse me if this question sounds stupid. I'm trying to override a "mt-8" with a "mt-md-0" and it doesn't work. Both classes contain an !important specifier and are targeting the same descriptor, so, no luck. What am I missing?

Thanks a lot,

[vladblindu]

I found out that using this little snippet:

<div class="text-center text-md-right">
    Test to right
</div>
<div class="text-center text-md-left">
    text-to-left
</div>

text-md-left overrides the text-center class, but text-md-right, does not.I took a closer look: The problem seemed to be the facct that bundle.css contained the class declaration in the following order:

1. text-md-left
2. text-center
3. text-md-right

So the classes showed up in inverse order for the two div's. One did override, the other not

To solve it I changed this code in typography.scss:

@each $align in ('left', 'center', 'right') {
  .text-#{$align} {
    text-align: #{$align};
  }
  @include create_breakpoints() using ($screen_size) {
    .text-#{$screen_size}-#{$align} {
      text-align: #{$align};
    }
  }
}

Into this:

@each $align in ('left', 'center', 'right') {
  .text-#{$align} {
    text-align: #{$align};
  }

}

@each $align in ('left', 'center', 'right') {
  @include create_breakpoints() using ($screen_size) {
    .text-#{$screen_size}-#{$align} {
      text-align: #{$align};
    }
  }
}

seems to solve another problem with text align media queries overrides

As I said, css is not my thing, but still this might be a bug. Please take a look upon it. Thanks

[vladblindu]

This solved the first question also Changing the _spacing.scss into this:

@for $i from 0 through 16 {
  @each $mORp, $marginORpadding in ('m': 'margin', 'p': 'padding') {
    @each $type,
      $suffix in ('a': '', 'l': '-left', 'r': '-right', 't': '-top', 'b': '-bottom')
    {
      .#{$mORp}#{$type}-#{$i} {
        #{$marginORpadding}#{$suffix}: $spacer * $i;
      }
      .#{$mORp}#{$type}-n#{$i} {
        #{$marginORpadding}#{$suffix}: $spacer * -$i;
      }
    }
  }
}

@each $mORp, $marginORpadding in ('m': 'margin', 'p': 'padding') {
  @each $type,
    $suffix in ('a': '', 'l': '-left', 'r': '-right', 't': '-top', 'b': '-bottom')
  {
    .#{$mORp}#{$type}-auto {
      #{$marginORpadding}#{$suffix}: auto;
    }
  }
}

@for $i from 0 through 16 {
  @each $mORp, $marginORpadding in ('m': 'margin', 'p': 'padding') {
    @each $type,
    $suffix in ('a': '', 'l': '-left', 'r': '-right', 't': '-top', 'b': '-bottom')
    {
      @include create_breakpoints() using ($screen_size) {
        .#{$mORp}#{$type}-#{$screen_size}-#{$i} {
          #{$marginORpadding}#{$suffix}: $spacer * $i;
        }
        .#{$mORp}#{$type}-#{$screen_size}-n#{$i} {
          #{$marginORpadding}#{$suffix}: $spacer * -$i;
        }
      }
    }
  }
}

@each $mORp, $marginORpadding in ('m': 'margin', 'p': 'padding') {
  @each $type,
  $suffix in ('a': '', 'l': '-left', 'r': '-right', 't': '-top', 'b': '-bottom')
  {
    @include create_breakpoints() using ($screen_size) {
      .#{$mORp}#{$type}-#{$screen_size}-auto {
        #{$marginORpadding}#{$suffix}: auto;
      }
    }
  }
}

[Florian-Schoenherr]

I think this was fixed by #241