CODEWITHSUNDEEP
cssresponsive-designsassbourbonneat
designerNProgrammer
designerNProgrammer

Reputation: 2701

grid columns not displaying correctly

I am using Bourbon Neat. I set some breakpoints in grid settings and for the mobile version I set 4 like this:

$mobile: new-breakpoint(max-width 480px 4);

I set the left and right containers like 3 for left and 1 for right; like this:

.demo
{

  @include outer-container;

  .leftContainer
  {
    @include span-columns( 6 );
    background-color:crimson;
    @include media($mobile) { 
      @include span-columns( 3 of 4);
    }
  }

  .rightContainer
  {
    @include span-columns( 6 );
    background-color:blue;
  }

  @include media($mobile) { 
    @include span-columns( 1 of 4 );
  }
}

But somehow the containers stack on each other instead of spanning 3 and 1 columns. What am I doing wrong?

Upvotes: 0

Views: 148

Answers (2)

Ariel Gerstein
Ariel Gerstein

Reputation: 186

You are using @include span-columns(3 of 4) but the .leftContainer and .rightContainer aren´t nested inside another div with span-columns(), so you should not pass the columns of the parent as an argument.

Try this:

.demo{

  @include outer-container;

  .leftContainer {
    @include span-columns( 6 );
    background-color:crimson;

    @include media($mobile) { 
        @include span-columns(3); /*Change this line*/
    }
  }

  .rightContainer{
    @include span-columns( 6 );
    background-color:blue;

    @include media($mobile) { 
        @include span-columns(1); /*and this one*/
    }
  }
}

Maybe you can check this documentation for more help.

Upvotes: 1

smharley
smharley

Reputation: 31

It's hard to tell without seeing the HTML too, but looks like the .rightContainer code is what's breaking. The second @include media($mobile) {} is outside of the .rightContainer {}

Try this:

.demo{

  @include outer-container;

  .leftContainer {
    @include span-columns( 6 );
    background-color:crimson;

    @include media($mobile) { 
        @include span-columns( 3 of 4);
    }
  }

  .rightContainer{
    @include span-columns( 6 );
    background-color:blue;

    @include media($mobile) { 
        @include span-columns( 1 of 4 );
    }
  }
}

Upvotes: 3

Related Questions