2

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

byrdr
  • 5,197
  • 12
  • 48
  • 78

1 Answers1

4

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.

Miriam Suzanne
  • 13,632
  • 2
  • 38
  • 43
  • I was able to figure everything out and have been mostly using push and pull. This helps clear everything up though. Thank you! – byrdr Oct 16 '14 at 01:58