I'm new to using Bourbon Neat and have a question about how the breakpoints work. In my grid_seeings.scss, I have breakpoints set up like such:
$xsm: new-breakpoint(min-width 300px 4);
$sm: new-breakpoint(min-width 600px 6);
$med: new-breakpoint(min-width 768px 8);
$lg: new-breakpoint(min-width 1024px 10);
$xlg: new-breakpoint(min-width 1200px 12);
The desired result is 4 items total, larger devices 2 rows of 2 each and smaller than larger devices, stacked at 100% width each. Here's my markup:
.grid-items {
@include outer-container;
.item {
width: 100%;
@include media($lg) {
@include span-columns(6);
@include omega(2n);
}
}
}
I would expect this to serve the itesms at 100% width until 1024px is hit, then serve each at 6 columns each and removing the margin for every 2nd item. For some reason, however, it's calculating the width at 58%. It has to do with the default columns for each breakpoint, 4, 6, 8, 10, 12. If I set these all to 12, it works. Do I have to define span4 at the smaller breakpoint first instead of just width:100%?
