I'm having a very basic problem getting columns to work in Foundation 4 with Sass/Compass.
At screen sizes larger than the $small media-query breakpoint (768px), I want the two columns to be of equal width (6 columns each) and beside each other. Right now, at screen sizes larger than $small, each column only occupies the left half of the page, with the second column bumping down below the first.
I've tried using Foundation's classes rather than the Sass mixins, but I'm getting the same result. I've also tried resetting to the Foundation default settings and imports, but nothing changes.
I have the following HTML:
<section>
<div class="header">
<h1>Sample text here.</h1>
</div>
<div class="content">
<p>Sample text here.</p>
</div>
</section>
I'm using the following SCSS:
section {
@include grid-row;
}
.header {
@include grid-column( 12 );
@media #{$small} {
@include grid-column( 6 );
}
}
.content {
@include grid-column( 12 );
@media #{$small} {
@include grid-column( 6 );
}
}
And here's a link to the reduced test case: http://bit.ly/149zpEq
The red column and green column should be side-by-side at screen sizes wider than 768px. Alas, they aren't.