I'm trying to follow the examples for the media query bases Neat grid here, but I'm having trouble getting the media queries to run. I'm able to get the tablet
and phone
ones to work, but I can not get the desktop
version to run. I have included the code and screenshots below:
SCSS
@import "../bourbon/bourbon";
@import "../neat/neat";
// Set a default grid.
$neat-grid: (
columns: 12, // define some columns to match your mockup.
gutter: 12px, // adjust gutters to match your mockup.
);
// Create a breakpoint.
$desktop: (
columns: 12,
media: 1280px,
);
$tablet-portrait: (
columns: 8,
media: 991px,
);
$phone-portrait: (
columns: 6,
media: 578px,
);
// This is "the grid" container.
.container {
margin: 0 auto;
max-width: 1280px;
}
// A row contains columns. grid-container creates a clearfix.
.row {
@include grid-container;
}
HTML
<h2>Media Queries (<a href="http://neat.bourbon.io/docs/latest/#grid-media">link</a>)</h2>
<p class="note">Squish the viewport to see this in action!</p>
<div class="container container-media-queries">
<div class="row">
<div class="col"><pre>Test</pre></div>
<div class="col"><pre>Test</pre></div>
</div><!-- .row -->
</div><!-- .container-media-queries -->
There isn't quite enough information here but it seems as though the confusion lies in the fact that the default behavior of the grid-media
mixin is to be mobile first. That means that the media query that it generates will be some thing like @media (min:width XXXpx) {…}
meaning it only activates at that dimension or larger. Check out https://github.com/thoughtbot/neat.bourbon.io/blob/master/source/assets/stylesheets/examples/article-layout.scss for reference