Monday 15 February 2010

css - Zurb Foundation Block Grid causing horizontal scrollbar -


Just got reported as a potential problem on Gitobb, but maybe I'm doing something wrong!

Check Bela to see this happening:

If you reduce the window width below the larger page size, then negative margins, on the basic base CSS element Is applicable, because the horizontal scrollbar appears

Just leave the following code in any of the foundation pages and resize the window to see it. Block grid builds on the "included in the grid" scrollbar but it corrupts the margins.

  & lt; Div class = "row" & gt; & Lt ;! - Use of both block grids for different layouts - & gt; & Lt; Ul class = "small-block-grid-2 large-block-grid-5" & gt; & Lt; Li & gt; & Lt; IMG src = "http://placehold.it/395x590" alt = "image1" /> & Lt; / Li & gt; & Lt; Li & gt; & Lt; Img src = "http://placehold.it/395x590" alt = "image2" /> & Lt; / Li & gt; & Lt; Li & gt; & Lt; IMG src = "http://placehold.it/395x590" alt = "image3" /> & Lt; / Li & gt; & Lt; Li & gt; & Lt; IMG src = "http://placehold.it/395x590" alt = "image4" /> & Lt; / Li & gt; & Lt; Li & gt; & Lt; IMG src = "http://placehold.it/395x590" alt = "image5" /> & Lt; / Li & gt; & Lt; / Ul & gt; & Lt; / Div & gt;  

You should wrap block-grid containers in the column div & lt; Div class = "twelve column" & gt; ; & lt; Div class = "row" & gt; Not enough.

See your Bela with this improvement:

No comments:

Post a Comment