CODEWITHSUNDEEP
htmlcsssasszurb-foundation
Malyo
Malyo

Reputation: 2000

Foundation 5 - 1170 grid calculated incorrectly

I've started learning foundation 5 and I've got app that uses 1170 grid, with 70px columns and 30px gutters (70 * 12 + 30 * 11 = 1170). Altho when i enter default values for my foundation _settings.scss file:

$row-width: rem-calc(1170); $column-gutter: rem-calc(30); $total-columns: 12;

But instead of having 70px width columns, single column has width of 97px. Anyone knows how it gets calculated, maybe I'm missing some settings variables? Thanks in advance.

I've figured out that in Chome for example, it generates a 68px column with 15px padding to left and right. Any way to make left and right container padding dissapear?

Upvotes: 0

Views: 606

Answers (2)

Malyo
Malyo

Reputation: 2000

I've figured my problem out.

It turns out that foundations 1170 grid, is actually a 1200px grid with 15px margins to both sides of every columns. It's actualy good idea considering we want to keep the outside margins for lower resolutions for frame gutter.

So the solution is to have $row-width set up to 1200.

Upvotes: 1

fahad.kazi
fahad.kazi

Reputation: 386

I have not used foundation but if you want you can create a new class for padding 0 for eg:

  .nopadding {
    padding:0;
  }

Also I think setting $collapse:true will do the trick.

Upvotes: 0

Related Questions