CODEWITHSUNDEEP
htmlcsszurb-foundation
Sam Weaver
Sam Weaver

Reputation: 1079

Foundation Grid column taking up whole width regardless of requested width of grid item

I'm using Foundation for Sites version 6.4.1, and upon updating to this version from version 6.3.*, my grid system is messed up. I need to use the legacy float grid instead of the new grid they introduced in 6.4, but the documentation indicates that 6.4 should be plenty backwards compatible.

If I have a row that looks like this:

<div class="row">
  <div class="medium-8 medium-centered columns">
    Content
  </div>
</div>

The center column will take up the entire page. What am I doing wrong?

Upvotes: 0

Views: 326

Answers (1)

Jesus Lugo
Jesus Lugo

Reputation: 796

Please make sure you're using the proper grid, Foundation 6.4 has 3 grids available: XY (default), Float and Flex.

The code in your sample belongs to the "traditional" Float Grid, while the default grid in this new version (from June 27th) is XY Grid. So you have two options:

  1. Change your markup according to the new XY grid (take a look to http://foundation.zurb.com/sites/docs/xy-grid.html )
  2. Change the framework to use the Float Grid, now this depends on how you downloaded the framework in first place; if you used the precompiled package, you should go to http://foundation.zurb.com/sites/download.html/#customizeFoundation to customize (basically just selecting the Float Grid and download a new package); if you used the SASS version, just go to the _settings.scss file, find the variable to select the proper grid and rebuild.

Hope this helps.

Upvotes: 1

Related Questions