Zurb Foundation Block Grid causing horizontal scrollbar

Question

Just reported this as a possible issue on github, but maybe I'm just doing something wrong!

Check out the fiddle to see this happening: http://jsfiddle.net/bu2Dw/1/

If you reduce the width of the window below the large page size, the negative margin that the default foundation css applies to the element causes the horizontal scrollbar to appear.

Just drop the following code into any foundation page and resize the window to see this happen. "Contain to grid" on the block grid div stops the scrollbar but it messes up the margins.

    <div class="row">
        <!-- Using both block grids together for different layouts -->
        <ul class="small-block-grid-2 large-block-grid-5">
          <li><img src="http://placehold.it/395x590" alt="image1" /></li>
          <li><img src="http://placehold.it/395x590" alt="image2" /></li>
          <li><img src="http://placehold.it/395x590" alt="image3" /></li>
          <li><img src="http://placehold.it/395x590" alt="image4" /></li>
          <li><img src="http://placehold.it/395x590" alt="image5" /></li>
        </ul>
    </div>

Answer 1

You should wrap the block-grid container in a columns div e.g. <div class="twelve columns">; putting it directly in a <div class="row"> is not enough.

See your fiddle with this correction: http://jsfiddle.net/guybrushthreepwood/z5xj8/1/