Susy Responsive Grids

Question

I've defined a Susy-based responsive grid system handling 4 (mobile), 8 (tablet) and 12 (desktop) columns. My layout is having a fixed header bar which is divided in two sections "logo" and "toolbar".

The "logo" div is not nested within Susy's grid-container and is positioned absolute to always be on the very left.

The "toolbar" div contains the Susy grid-container and holds a search- and a logout-action - so far so good :)

When resizing the browser its in the nature of the grid to change total-columns when there's no more space for say 12 columns. This causes following problem:

The "logo" div gets overlapped by the grid since its positioned absolutely.

Is there a way to tell Susy to break the layout to 8 columns before the black border of the "logo" div is being reached?

Any advice would be highly appreciated. Thanks in advance.

Answer 1

@Eric: I managed to get it working. This is what is used:

@mixin update-container {
    @include container;
    @include susy-grid-background;
}

.page {
    @include update-container;

    @include at-breakpoint(865px 8 1149px) {
        @include update-container;
    }

    @include at-breakpoint(1150px 12) {
        @include update-container;
    }
}

So I've explicitly described the min- and max widths to tell the columns when to change. Is this the "right" way to go or is there any more elegant way for solving this?

Thanks :)