1

Have been coming up with this rather irritating error - when my code is 

benefits {
@include outer-container;

.benefit_text {
    @include span-columns(4);
    @include shift(2);
}

.benefit_list {
    @include omega();
    @include span-columns(4);

}

.testing {
    @include shift(2);
    @include span-columns(8);
    @include omega();
}


}

The alignment is as it should be, however, if I try to add media breakpoints, e.g 

benefits {
@include outer-container;

.benefit_text {
    @include span-columns(4);
    @include shift(2);
    @include media($tablet) {
        @include span-columns(9);
        @include shift(0);
    }
}

.benefit_list {
    @include omega();
    @include span-columns(4);
    @include media($tablet) {
        @include span-columns(9);
    }
}

.testing {
    @include shift(2);
    @include span-columns(8);
    @include omega();
}

}

The alignment of the last div goes off for some reason (about one and a half columns too much) This happens on the larger screens even though it does seem to drop the columns without any trouble once i hit my $tablet breakpoint (which is 768px, 9)

Frustrating because the example http://neat.bourbon.io/examples/ does not address how its columns are dropping to full width on resize (especially the example with multiple rows) I've even tried to wrap the two columns in a row wrapper and apply the shift to the wrapper but this seems to squeeze the two collumns together instead, would be thankful for any help!

stridlinnea
  • 11
  • 1
  • I think I might have solved the issue, seems to be that I had to wrap the two smaller collumns in a wrapper, but not put a shift on that wrapper. Also I reset my _grid-settings.scss to the default $max-width. The way I'm getting them to drop now is via a mixin: `@mixin col($col-no, $shift-no, $media, $drop-to, $shift-to) { @include span-columns($col-no); @include shift($shift-no); @include media($media) { @include span-columns($drop-to); @include shift($shift-to); } }` but I'm still wondering if there is another way? – stridlinnea Dec 19 '13 at 16:42
  • I'm having the same problem, and don't fully understand your solution. Could you elaborate? – Chris Nov 16 '14 at 12:18
  • I explain it a bit more [here](http://blog.seriousfox.co.uk/post/69796009517/bourbon-neat-with-default-column-dropping-updated) basically whenever you have a column without a shift you still have to define shift(0) in order for it to work properly. However, I've realised the more elegant way of doing this is by working mobile first and only defining @include span-columns() etc at a min-width breakpoint. – stridlinnea Nov 17 '14 at 13:12

0 Answers0