Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

susy - how to make it full width (no gutter)?

Tags:

css

layout

susy

I got a problem when I using SUSY build a grid. I set wrapper class following:

$susy: (
    math: fluid,
    columns: 12,
    gutters: 0.25,
    gutter-position: split,
);

the problem is child element inside wrapper. In case sometime I want to make full columns I try to do this

@include span(full);

but this is not full, It has gutter gap. and I try another

@include span(full no-gutters);

this make element no gutter but it still leave gutter width.

how can I make it full (no gutter) ? only for some element.

Thanks Chalat

like image 237
Alonewolf Avatar asked Oct 28 '14 12:10

Alonewolf


1 Answers

Block level elements are full-width by default, you don't need any mixin for that. If you are overriding a previous Susy mixin, you can just use width: 100%. Or you can do change this element to use inside no-gutters to make Susy output what you want.

@include span(full inside no-gutters);

That works because inside-gutter handling is the same as split, but the element has to span the outer width or columns + gutters.

like image 148
Miriam Suzanne Avatar answered Nov 14 '22 04:11

Miriam Suzanne