In Neat 1.8 I used 3 breakpoints for my media queries and they where as follows:
$mobile: new-breakpoint(min-width 320px max-width 767px);
$tablet: new-breakpoint(min-width 768px max-width 1024px);
$desktop: new-breakpoint(min-width 1025px);
But in Neat 2.0 I just can´t get the $tablet
media query to work, only desktop and $mobile
work, but bypasses $tablet
completely.
My SCSS file
$neat-grid: (
columns: 12,
gutter: 2em,
);
$mobile: (
columns: 12,
gutter: 1em,
media: 'screen and (min-width: 320px) and (max-width: 767px)'
);
$tablet: (
columns: 12,
gutter: 1.1em,
media: 'screen and (min-width 768px max-width 1024px)'
);
.element {
@include grid-column(3);
@include grid-media($mobile){
@include grid-column(4);
}
@include grid-media($tablet){
@include grid-column(6);
}
}
My sites are simple and therefore I like to use a range for my media queries e.g: (min-width 768px max-width 1024px. This working perfectly for Neat 1.8 but after upgrading I can't get $tablet
to work.
What am I missing??
I think the issue is that your SCSS is slightly wrong for the tablet section. Try this:
$tablet: (
columns: 12,
gutter: 1.1em,
media: 'screen and (min-width 768px) and (max-width 1024px)'
);