Skip to content

HTTPS clone URL

Subversion checkout URL

You can clone with HTTPS or Subversion.

Download ZIP

Loading…

changing 2 columns to 3columns #295

Closed
ShaneKozzy opened this Issue · 1 comment

2 participants

@ShaneKozzy

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);
}
}

@ericam
Owner

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);
}
@ericam ericam removed the Susy Next label
@ericam ericam closed this
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Something went wrong with that request. Please try again.