changing 2 columns to 3columns #295

Closed
ShaneKozzy opened this Issue Feb 9, 2014 · 1 comment

Comments

Projects
None yet
2 participants

I have set up the susy to work with my new site the spec for my web site is following.
All the content exists within a box which has the width of 230px; It works perfect
until it gets bigger than 960px. After that, every 5th box doesn't align with all the boxes
in the second columns. Do you have any clues?

$total-columns :3;
$column-width: 230px;
$gutter-width: 90px;
$grid-padding: 0;

$small: 230px;
$mid: 600px;
$large: 960px;

.contentBoxOutterContainer{
@include span-columns( 1, 1 );
@include at-breakpoint($mid){
@include span-columns( 1, 2 );
@include nth-omega(2n);
}
@include at-breakpoint($large){
@include remove-nth-omega(2n);
@include span-columns( 1, 3 );
@include nth-omega(3n);
}
}

Owner

mirisuzanne commented Feb 9, 2014

Context isn't being passed consistently. You need to add context to either the at-breakpoint declarations, or the remove-nth-omega mixin:

// add context to the breakpoint
@include at-breakpoint($large 3){ 
  @include remove-nth-omega(2n);
  @include span-columns( 1, 3 );
  @include nth-omega(3n);
}

// add context to remove-nth-omega
@include at-breakpoint($large){ 
  @include remove-nth-omega(2n, $context: 3);
  @include span-columns( 1, 3 );
  @include nth-omega(3n);
}

mirisuzanne removed the Susy Next label Mar 10, 2014

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment