css - How to set a maximum container-width in Susy that only the padding/margin keeps growing on larger viewports? -

in largest desktop view/breakpoint tried accomplish same behaviour on susy demo page ( http://susy.oddbird.net/demos/magic/ ) - when container maximum width reached padding or margin on each side growing while container stays @ maximum-width.

but still bit confused few points preferable unit , what's best function accomplish described padding/margin behaviour.

my general susy settings @ moment following:

$total-columns: 24; $column-width: 3%; $gutter-width: 1%; $grid-padding: 0; 

the specific scss part looks that. i've included container , flanked margin via squish:

.sectionwrap{     @include container;     @include squish(3,3);     @include breakpoint($medium) {         @include squish(2,2);     }     @include breakpoint($small) {         @include squish(1,1);     } } 

but problem container , squished areas both grow , grow , grow proportionally. 1 flaw used units percentages? more reasonable use em or rem instead?

means when summed , maximum width reached (number of columns * (column-width + gutter-width)) automatically squished areas keep on growing in theory? tried , failed.

i tried set:

$container-width: 1000px; 

but no luck. hints appreciated. best regards ralf

update: i've rearranged site mobile first , thought got whole susy grid concept little bit mislead squish() incident @ first. :s somehow guess wrong again.

// breakpoint variable set breakpoint - value converted em breakpoint $fivehundred: min-width 500px;     //basic susy settings initial mobile viewport $total-columns: 8;   $column-width: 3em; $gutter-width: 1em; $grid-padding: 1em;  //modified susy setting larger viewport //intentionally chose larger numbers see significant change @ breakpoint $largerviewport: 12,5em,1em,1em;  //the main content area wrapper class wanted enlarge container //at each breakpoint step step .sectionwrap{     @include container;     @include breakpoint($fivehundred) {         @include with-grid-settings($largerviewport);     } } 

somehow container width sticks past $fivehundred breakpoint , beyond still initial values instead $largerviewport ones. somehow fear wrong way modify container in wrapper class? error in reasoning on side? best regards ralf

update 2: ok odd. i've tried following sass code right now:

.sectionwrap{     @include container;     background-color: red;     @include breakpoint(500px) {         @include with-grid-settings(24,7em,4em,1em);          background-color: green;     } } 

and css returned looks following:

.sectionwrap {   max-width: 31em;   padding-left: 1em;   padding-right: 1em;   margin-left: auto;   margin-right: auto;   background-color: red; }       .sectionwrap:after {          content: "";          display: table;          clear: both; }   @media (min-width: 31.25em) {     .sectionwrap {       background-color: green;      }  } 

somehow whole with-grid-setting left out?

update 3: ok figured things out. haven't realized necessary set container width after have included with-grid-settings function. in example changed gutter wasn't necessary. here seems is.

.sectionwrap{     @include container;     @include breakpoint($fivehundred) {         @include with-grid-settings($columns: 12, $width: 3em, $gutter: 1em, $padding: 1em){                 @include set-container-width;         }      } } 

update 4 ok others might run similar issue, might helpful. wondered why values set in with-grid-settings function haven't been respected - padding value in particular. realized set container width sets max-width value. apply entered values grid have add container mixin again maxwidth paddings utilised. seems fine , working. ;) took while. cheers r.

both % units , squish mixin working against you. susy sets max-width on containers default, in same units used define grid. in fact, that's units used for. if want max-width in px, define grid in px. if want em use em. $container-width override default, should have worked. have see actual code when tried know went wrong.

i recommend this:

$total-columns: 24; $column-width: 30px; // adjust needed $gutter-width: 10px; // adjust needed $grid-padding: 0;  .sectionwrap{   @include container; } 

anything else overcomplicating things.