I have a really simple issue that seems to be difficult to solve. I want to stick with the normal standard 12 column neat grid, but I want the two .homeSplit divs to take up 5 columns each. I would like the second one(.insights) to get 1col of space in the middle so I gave it a grid-push(1). When it gets to mobile sizes, I want each of these divs to take up the full 12 columns and stack on top of each other. The issue is that once I get down to mobile size, that 1col space I assigned with grid-push(1) is persisting and I can't figure out how to get rid of it.
CSS/SASS:
.homeSplit {
position: relative;
@include grid-column(5);
&.news {
.post {
margin-bottom: 26px;
}
}
&.insights {
@include grid-push(1);
padding-left: 30px;
z-index: 999;
.post {
margin-bottom: 26px;
}
}
}
@media only screen and (max-width: 959px) {
.homeSplit {
@include grid-column(12);
&.insights {
@include grid-push(0);
}
}
}
I have tried grid-push(-1) as well but it goes too far. Am I misunderstanding how to use Neat? Pulling my hair out over here.
The best path here would be to use the grid-media() mixin to have a series of grids. Here is an example of what that would look like (with some of the extraneous code removed.
Also, neat by default favors min-width over max-width in media queries. based on your layout, min-width makes things a lot easier.
$my-desktop-grid: (
media: 959px,
);
.homeSplit {
@include grid-column(); // default's to 12 here
@include grid-media($my-desktop-grid) {
@include grid-column(5);
&.insights {
@include grid-push(1);
}
}
}
I've created a codepen as an example so you can see what this looks like in action.