4

I've got this weird problem in Zurb Foundation 5. Whenever i nest row inside rows, it produces negative margin, throwing it out of a grid. Here's example markup of my code:

<div class="row main-content">
    <div class="row">
        <div class="breadcrumbs columns small-12">My account / Companies list /</div>
        <div class="columns small-6 heading-container">
            <h1>Create new company</h1>
        </div>
    </div>
</div>

And this is the code, that foundation produces:

.row .row {
    width: auto;
    margin-left: -0.9375rem;
    margin-right: -0.9375rem;
    margin-top: 0;
    margin-bottom: 0;
    max-width: none;
}

How do i prevent this behaviour? Is there something wrong with my markup, or should i override the foundation scss (but i don't want to override default styles).

general03
  • 855
  • 1
  • 10
  • 33
Malyo
  • 1,990
  • 7
  • 28
  • 51

2 Answers2

3

You need to nest inside a row i.e. 

<div class="row">
  <div class="breadcrumbs small-12 columns">
     My account / Companies list /
    <div class="row">
    <div class="Heading-container small-6 columns">
      <h1>Create new company</h1>
    </div>
   </div> <!--/nested row-->
 </div>
</div><!--/row-->
Intellidroid
  • 1,053
  • 1
  • 9
  • 15
  • 1
    Actually nesting it with a div in between the row and nested row will do nothing. The css selector is selecting a row that exists anywhere in another row. Reference on difference between space and > with css selectors: http://stackoverflow.com/questions/2636379/css-selectors-versus-space – Csharpfunbag Jun 27 '15 at 04:32
-3

The problem is with "columns" vs "column"

If you add the columns (with an "s") class, it will remove padding since it's the first-child. Change it to the singular "column" and the padding will be added.

Ted C
  • 161
  • 1
  • 4
  • 1
    `column` and `columns` are identical. [_You can use column or columns - the only difference is grammar_](http://foundation.zurb.com/docs/components/grid.html). He has nested a `row` within a `row` without any `columns`. A row should never exist without a column descendant. I've found that this reduces the gutter padding on the column though, foundation tries to offset this with negative margin but a better approach is to just add a `collapse` class to the outer most row. – DGibbs Jun 25 '15 at 08:39