CODEWITHSUNDEEP
sassbourbonneat
Chappy Brandon
Chappy Brandon

Reputation: 3

Bourbon Neat grid-push not working as expected?

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.

Upvotes: 0

Views: 159

Answers (2)

whmii
whmii

Reputation: 440

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.

https://codepen.io/whmii/pen/aVvqma

Upvotes: 0

whmii
whmii

Reputation: 440

Option 1: the nesting is wrong.

In looking at the example above the @media declaration is nested within the .homeSplit block, but then .homeSplit is declared again w/in @media. However the code you have above would likely not run and would error out, so I'm going to assume there was something lost in translation when it was copped and pasted in to your question.

Option 2: grid-push wants false or just to be empty.

grid-push(0) isn't really a thing but in sass 0 may == false so you can try the following:

.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) {
        @include grid-column(12);

        &.insights {
            @include grid-push(); // 'false' is the default here
        }
    }
}

Note: I also cleaned up some of the nesting at the bottom

Im going to add a second answer that shows how to do this using the grid-media mixin.

Upvotes: 0

Related Questions