media-breakpoint-down is off by 1px

[apomili]

Bootstrap 4 - mixin/breakpoint

Hy guys,
I don't know if I am using mixin in a bad way, but I just discover that this instruction don't work in the way I supposed.

@include media-breakpoint-down(sm) {
   //my style
}

I assumed that this style will be applied from 0 to 767 pixel screen, but it will from 0 to 766.

I change the function breakpoint-max on breakpoint.scss in this way (-0.05 instead of -0.1):

@function breakpoint-max($name, $breakpoints: $grid-breakpoints) {
  $next: breakpoint-next($name, $breakpoints);
  @return if($next, breakpoint-min($next, $breakpoints) - 0.05, null);
}

and it seem to work fine but i don't know if mess with all the other

Nice work,
I love you!

Alessandro

[mdo]

Unsure what you're running into, but it works fine on my end. Can you create a jsbin example that reproduces what you're seeing?

[apomili]

Sorry, I don't know how to use jsbin to do a demo because i'm using the scss mixin and not the css class, but the demo is very simple.

html

<div class="demo">
        DEMO
</div>

scss

    .demo {
        @include media-breakpoint-down(sm) { // this work up to 766
            background: red;
        }
        @include media-breakpoint-up(md) { //this start at 768
            background: green;
        }        
    }

In this demo at the screen width 767 the background is not red and neither green. I suppose this problem occur for each breakpoint

[glebm]

@kickinass Seems like you're using an older version of bootstrap 4 that uses rems and not pixels for the breakpoint widths. Can you try upgrading and see if the issue disappears?

[apomili]

Yes, the grid breakpoint is in rem, I started this project one month ago or little more, and downloaded the framework from the official site.

I'll try to upgrade, I hope nothing will break! :)

[apomili]

Ok, no problem now!