CODEWITHSUNDEEP
sasssusy-compass
aaandre
aaandre

Reputation: 2512

Susy grid changes container size when the font size changes -- how to work around this?

I am using susy grids 1.0.9 and noticed something which has me confused.

I have two elements, ".page_1" and ".page_2", with identical settings -- spanning 10 columns each, padded on both sides.

I noticed an unexpected behavior: if I use $container-style: static, the container size starts changing depending on the font-size applied to said container.

If I change font-size to 1em both containers are again the same size.

If I change '$container-style' to 'magic' both containers are the same size, too. This behavior takes place only with a font-size specified on the element when the $container-style' is set tostatic.`

What am I doing wrong?/Is there a workaround for this? Code below.

$total-columns: 12;
$column-width: 4em;
$gutter-width: 1em;
$grid-padding: $gutter-width;
$container-style: static;

#section_1 {
  background-color: #963;
  border: 4px solid green;

  .pages_wrapper {
    @include container;
  }

  .page {
    border:1px solid yellow;
    @include prefix(1);
    @include span-columns(10,12);
    @include suffix(1);

    text-align: center;
    color: #fff;
  }

  .page_1 {
    font-size: 1em;
  }
  .page_2 {
    font-size: 1.25em;
  }
}

HTML: 

<section id="section_1">
  <section class="pages_wrapper">
    <section class="page_1 page">
      <h1>Page 1</h1>
    </section>
    <section class="page_2 page">
      <h1>Page 2</h1>
    </section>
  </section>
</section>

Screenshot showing the issue (Latest Chrome):

$container-style:static; , .page_2 {font-size: 1em} : screenshot

Upvotes: 0

Views: 278

Answers (1)

flopkinson
flopkinson

Reputation: 46

The width of .page is calculated in em, because you set your column/gutter widths as ems (which are font-size based). Since you're giving .page_2 a larger font-size than .page_1 the width of the container will grow as well.

If you want to use the static layout you can change your column/gutter settings, or set a fixed container-width:

$container-width: 960px;

This will apply a fixed width of 960px on .pages_wrapper and the width of .page will get calculated in percent.

Alternatively, you could alter your HTML and apply font-size on an additional container inside the container that uses the span-column mixin:

<section id="section_1">
  <section class="pages_wrapper">
    <section class="page">
      <div class="page_1">
        <h1>Page 1</h1>
      </div>
    </section>
    <section class="page">
      <div class="page_2">
        <h1>Page 2</h1>
      </div>
    </section>
  </section>
</section>

Upvotes: 3

Related Questions