Bourbon Neat still using 12 columns even when guides show 4 columns

Question

I am using Bourbon and Neat in a static Octopress site I am building. I'm using the _grid-settings.scss file with no changes, other than turning on the guides ($visual-grid: true;). In my screen.scss I'm loading grid-settings after Bourbon, but before Neat:

@import "bourbon/bourbon";
@import "grid-settings";
@import "neat/neat";

Since I'm using the default grid settings small screens should only be 4 columns wide.

$phone-portrait: new-breakpoint(max-width $tiny-screen 4); // 450px

When I view the site on a screen that's less than 450px, the visual grid shows 4 columns, but layout is still using 12 columns. I have several places where I'm using 4 column divs in the layout, on mobile these should be full width, since the page is only 4 columns, but they are only a third the width of the page. I can verify that mobile is still using 12 columns by replacing @include span-columns(4) with @include span-columns(12). The 12 column divs are the only divs that are full width on mobile.

Why isn't Neat using the same number of columns for both the guides and my layout?

Answer 1

It turns out the issue was due to not using @include span-columns(4) on the div within the breakpoint that changes the number of columns ($phone-portrait: new-breakpoint(max-width $tiny-screen 4);). At first this seemed odd, until I understood what was actually going on. When I was setting the div to span 4 columns, neat takes the number of columns and divides them by the total number of columns at the current breakpoint. In my case this would be 0.333, which is then used as the width percentage of the div. The thing is, this doesn't ever change, even if the total number of columns later changes do a breakpoint. My div is always going to be 33.3% wide. What I need to do is repeat the span-columns include inside the media selector for the breakpoint, like this:

$phone-portrait: new-breakpoint(max-width $tiny-screen 4);

.my-div {
  @include span-columns(4);
}

@include media($phone-portrait) { 
    .my-div {
      @include span-columns(4);
    }
}

This ensures my div will be 100% wide on for the $phone-portrait breakpoint.