CODEWITHSUNDEEP
susy-sasssusy
byrdr
byrdr

Reputation: 5487

Susy 2.0 span not working as expected

I have a fairly simple issue that I can't seem to figure out. Positioning spans at certain columns does not seem to have any effect. 

header {  
.fullheight {
    @include backImage('../images/img_hero_brightspace-homepage.png');
    @include container(100%);
    .hgroup {
      @include span(6 at 6 of 12);
      padding: 200px 0 50px 0px;
      text-align: center;
      h3{
        display: block;
        font-weight: $light;
        font-size:2rem;
        color:grey;
      }
    }
}

The line in question is 

@include span(6 at 6 of 12);

The span is still starting at 1. Is there something obvious that I'm doing wrong?

enter image description here

Upvotes: 2

Views: 735

Answers (1)

Miriam Suzanne
Miriam Suzanne

Reputation: 14010

The at location keyword can only set positioning when you use isolation output. span(6 at 6 of 12 isolate) will push an element around. You can also use the push or pull mixins to move elements out of their default position.

The problem is that locations are relative to the default flow, and in a normal floated layout Susy has no idea what the default position is for an item. We can't push your element into column 6, if we don't know where it is right now. Isolation is a technique for positioning all your floats off the left edge.

If you don't use isolation consistently, I'd use push or pull as they are explicitly relative.

Upvotes: 4

Related Questions