Weird behaviour at 767px when creating a new custom breakpoint

[Dinuz]

@thomas-mcdonald @radar

Hi Guys,
I was trying to add a custom breakpoint in my sass bootstrap, and I incurred in a very strange behavior.

My custom breakpoint is(as asked by many people) between the sm breakpoint (min-width 768px) and a subdivision of the existent xs breakpoint (exactly at 480px).

I proceeded creating the value of my variables for the new grid, and included them with the variables to modify the aspect of the standard bootstrap (like link colors, text colors and fonts for example) before including bootstrap:

$container-ns: 460px !default;
$screen-ns: 480px !default; // Intermediate small screen / phone. (Custom breakpoint).
$screen-ns-min: ($screen-is) !default; // Minimum screen size for the custom grid.
$screen-ns-max: 767px !default;

$screen-xs-max: ($screen-is-min - 1) !default; // Maximum screen size for xs (We have to call it before bootstrap).

I then created the columns generators in another file included after bootstrap, declaring here the new value for the sm grid min-width (in order to avoid overwrite by bootstrap itself):

$screen-sm-min: ($screen-ns-max + 1);

.container {
    @include container-fixed;

    @media (min-width: $screen-ns-min) and (max-width: $screen-ns-max) {
        width: $container-ns;
    }
}

@media (min-width: $screen-ns-min) and (max-width: $screen-ns-max) {
    @include make-grid(ns);
}

@mixin make-ns-column($columns, $gutter: $grid-gutter-width) {
    position: relative;
    min-height: 1px;
    padding-left:  ($gutter / 2);
    padding-right: ($gutter / 2);

    @media (min-width: $screen-ns-min) and (max-width: $screen-ns-max) {
        float: left;
        width: percentage(($columns / $grid-columns));
     }
}

@mixin make-ns-column-offset($columns) {
    @media (min-width: $screen-ns-min) and (max-width: $screen-ns-max) {
         margin-left: percentage(($columns / $grid-columns));
     }
  }

 @mixin make-ns-column-push($columns) {
     @media (min-width: $screen-ns-min) and (max-width: $screen-ns-max){
          left: percentage(($columns / $grid-columns));
      }
  }

 @mixin make-ns-column-pull($columns) {
     @media (min-width: $screen-ns-min) and (max-width: $screen-ns-max) {
          right: percentage(($columns / $grid-columns));
      }
  }

The new grid called ns(new small) apparently works fine everywhere, except at width 767px (a px below the sm breakpoint), where the behaviour is xs(I don't understand why).

At 768px the code behave as sm breakpoint, and at 766 behave as ns breakpoint, but at 767 it just behave as xs breakpoint (seems like not overwriting that point at all, effectively that is the last xs breakpoint - the xs-max for the bootstrap default).

I really cannot understand what is going on, except, that maybe we are not really able to overwrite that specific 767??

The grid works ok going down from 767 and right going up to 767. The issue it's just in 767 exactly there!

I think that inside bootstrap, there is some other place where the 767 is hard coded, and that happen to overwrite the ns rule with the xs.

It's like a singularity(it use the xs fluid style), between ns and sm.

Let's see if I can be more clear:

Screen <480 => XS
480<= screen < 767 => NS
screen = 767 => XS (singularity)
768<= screen<=991 => SM
Etc

The fact that the weird behavior happen exactly around the change point of the grid(the original and not the customized bootstrap), in someway indicate that in some other place something need to be related with that.

What do you think? How I can solve this issue? is it possible to solve?

Thanks
Dinuz

[radar]

Unsure of why I was tagged in this issue. I am not a maintainer of this project. I only commented on your previous issue because it was unsightly.

[Dinuz]

@radar sorry to have tagged you in...I thought maybe you could have an opinion.
No bad feelings here, just looking to solve an issue, and trying to share my experience with the community.
The interaction and exchange of opinions and experiences is what make development speed up.

Thank anyway.

[cvrebert]

Please post all of your $screen-* variables.

[cvrebert]

@Dinuz Unless you post the requested variable values, we'll have to close this issue.

[cvrebert]

Closing due to lack of response.