Zurb's Foundation 3: Smaller grid width

Question

Been working with the Zurb Foundation 3 framework.

I'm trying to set at smaller width than 1000px in the _settings.scss, but for som reason it only goes down to 770px even if I put in a smaller number. Here is what I did:

1. Executed compass: compass watch projectname
2. Edited _settings.scss: $rowWidth: 660px;

3. Set markup to:

   <div class="row">
           <div class="twelve columns">
               <h1>Heading</h1>
               <p>Some message here ...</p>
           </div>
   </div>

Answer 1

Here is how i solved it:

1. Created a _overrides.scss file: sass/_overrides.scss
2. Imported the file in app.scss: @import "overrides";

3. Added this to the _overrides.scss file:

   @media only screen and (min-width: $rowWidth) {
       .row {
           min-width: $rowWidth;
       }
   }
   @media only screen and (max-width: 767px) {
       .row {
           width: $rowWidth;
           margin:0 auto;
       }
   }

4. Now I can control the width in _settings.scss by changing $rowWidth, for example: $rowWidth: 660px;

Just one little issue: if the $columnGutter is less than 30px there will be horizontal-scroll if the screen-size is less than 660px.