There's an unwanted space between two blocks in susy. It seems to follow the size of the grid exactly, despite using the wide
feature.
$susy: (
columns: 9,
gutters: 0.454,
debug:(image: show,
output : overlay,)
)
;
#grid{
@include container(9);
@include background-grid;
gutter-width: 0.454;
}
#main_side_img{
@include span(1.75 wide of 9);
}
#main_heading_container{
@include span(4 of 9);
background-image: url(http://i.imgur.com/7Yxm5Sa.jpg);
}
The code above, with #main_side_img
set to 1.75
creates this:
So I set the value of #main_side_img
to 2
and much to my dismay the space between the two boxes remained constant, and the gutter simply moved over!
The gutter remains constant independent of the value I set for the span argument.
Bonus: isn't wider supposed to fill in the gutter on the left and on the right? It is filling in 2 gutter's-widths to the right.
Add the no-gutters
keyword to your wide span. While wide
tells it to add more space to the span width, it does not automatically remove the gutter output.
@include span(1.75 wide of 9 no-gutters);