CODEWITHSUNDEEP
csssasscss-floatcompass-sasssusy-compass
Cofey
Cofey

Reputation: 11414

Why is Susy giving my columns a 44.44444% width instead of 50%?

Cannot figure out why my columns are not 50% when no-gutters is included in the parameters?

SCSS:

$susy: (
  global-box-sizing: border-box,
  gutters: 1/4,
  gutter-position: before
);

.columns {
  @include clearfix;
}

.column {   
  .twoColumns & {
    @include span (1 of 2 no-gutters);
  }
}

CSS:

.columns:after {
  content: "";
  display: table;
  clear: both;
}

.twoColumns .column {
  width: 44.44444%;
  float: left;
}

Upvotes: 1

Views: 206

Answers (1)

Mario Araque
Mario Araque

Reputation: 4572

You have to set gutter-position with inside value to get 50% of columns:

$susy: (
  global-box-sizing: border-box,
  gutters: 1/4,
  gutter-position: inside
);

.columns {
  @include clearfix;
}

.column {   
  .twoColumns & {
    @include span (1 of 2 no-gutters);
  }
}

Upvotes: 4

Related Questions