I'm currently using Bourbon Neat. I need .posts__post to span 3 of 6 columns on tablet and then 2 of 6 on on desktop and above. However i'm finding that my desktop media query is not working and that the tablet query remains through to desktop.
_grid.scss
$tablet: em(768);
$desktop: em(960);
// Breakpoints
$tablet: new-breakpoint(min-width $tablet 6) ;
$desktop: new-breakpoint(min-width $desktop 6);
posts.scss
@include media ($tablet) {
.posts__post{
@include span-columns(3 of 6);
@include omega(2n);
}
}
@include media ($desktop) {
.posts__post{
@include span-columns(2 of 6); // only spans up to 4 columns in total
@include omega(3n); // still remains as 2n
}
Here is what im trying to achieve for [desktop][1. Not sure what i'm doing wrong. This could be resolved if the omega(3n) in $desktop media query is respected, however its not and remains as 2n.
The problem is that when the $desktop media query takes effect, it doesn't undo the $tablet omega mixin. So at $desktop your :nth-child(3n) has no right margin and 3n+1 is cleared left, but 2n still has no right margin and 2n+1 is still cleared left as well.
You might need to edit your media queries to include a max-width value on the $tablet query as well. With the em() mixin that's not so much of a pain since you can do something like:
$tablet: em(768);
$tablet-max: em(959);
$desktop: em(960);
Things could get confusing if you continue naming the media query variable the same as the breakpoint width, so I'd suggest something like $mq-tablet.
Alternatively, you could use Flexbox and span-columns() with the "block-collapse" display property. This might require some additional tweaks to the markup depending on your design.
On a general note, please include a full working demo of the problem to help in solving it.