2

I am currently using SUSY to create a responsive grid system for the website I'm working on.

My grid.scss file looks a bit like this:

@for $i from 1 to $noOfGridColumns+1 {
    .desktop-#{$i}{
        @include span ($i of $noOfGridColumns);
        @media screen and (max-width:641px){
            @include span ($noOfGridColumns of $noOfGridColumns);
        }
    }

    &:last-child{
        @include span(last $i of $noOfGridColumns);

        @media screen and (max-width:641px){
            @include span ($noOfGridColumns of $noOfGridColumns);
        }
    }
}

However when I use a desktop-6 class within another desktop-6 class my gutter width becomes half as small as it is for non-nested content.

I understand why this is happening as everything is percentage based according to the column width but how can I overwrite this or add styles for nested DIVs to use a gutter twice as wide?

Any help would be great.

Thanks

James Howell
  • 1,392
  • 5
  • 24
  • 42

0 Answers0