CODEWITHSUNDEEP
sassbourbonneat
Oliver
Oliver

Reputation: 99

Bourbon Neat Grid, at mobile breakpoint

I have a really basic website that uses sass and bourbon neat grid framework. I am trying to achieve the same effect as the (http://neat.bourbon.io/examples/), site. At 800px width the grids seem to have a breakpoint and drop the span-columns and go to 100% width.

The code below outputs a wrapper and two 4 and 8 span divs. When I make the browser smaller even down to 300px the grid is still kept and the title and content divs dont break and go full width 100%.

How can I achieve this effect? I have tried making the divs 100% by default and at and breakpoint add the span-columns but this doesn't work. Thanks.

.wrapper {
@include outer-container;
.title {@include span-columns(4);}
.content {@include span-columns(8);}
}

<div class="wrapper">
<div class="title"></div>
<div class="content"></div>
</div>

Upvotes: 2

Views: 554

Answers (1)

Drops
Drops

Reputation: 2740

You must specify breakpoints in order to accomplish that. Just @include Neats media($your_settings) and you're ready to go, read more here. Something like this: 

.wrapper {
  @include outer-container; 

  .title {
    @include span-columns(4);

    @include media(max-width 300px) {
      @include span-columns(12); // or whatever you need for 100% width
    }
  }

  .content {
    @include span-columns(8)
  }
}

Upvotes: 1

Related Questions