samsos samsos - 1 month ago 13
CSS Question

Bourbon Neat ignoring 'omega' in media query

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.

Answer

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.

Comments