Created by: MartijnCuppens
media-breakpoint-down()
always used the next breakpoint, so if you want to target viewports smaller than lg
(992px) you needed to use:
.selector {
// Below lg breakpoint:
@include media-breakpoint-down(md) {
display: none;
}
}
I've made another codepen to illustrate the problem: https://codepen.io/MartijnCuppens/pen/pMNjaN?editors=1100
In this PR, I've changed the implementation to use the breakpoint itself. I've also dropped the media-breakpoint-only()
mixin since we do not use the "breakpoint zone" approach like we did in v3.
The new implementation looks like this: https://codepen.io/MartijnCuppens/pen/MNBqjY?editors=1100
To simplify reviews: this is the difference in generated css, some blocks are just shifted: https://www.diffchecker.com/2ZUTxc1P (updated June 14th)