Menu icon Foundation
Unwanted double gutters

Screen shot 2014 08 14 at 11.02.49

I am working with a 20 column grid, and I have a row that has two divs, a large-13 and a large-7. Then within that large-7, I have there are two divs that have medium-10.

These divs have a border of 1px, and for the divs with medium-10, the gutters are doubled (16px is the normal gutter width, so it is 32px). So, in the largest view, the space between the borders is wider than I would like it to be.

In the image I attached, at the top you can see the corners and gutters of the divs I am talking about. Below them are another large-13 and large-7, which don't have the medium-10 divs inside, so they look like I would like them to look.

So, my question is how can I make the medium-10 divs take the width of the large-13 and get rid of that extra gutter?

I hope that is clear.

Any help would be appreciated.

Thanks.

gutters

Screen shot 2014 08 14 at 11.02.49

I am working with a 20 column grid, and I have a row that has two divs, a large-13 and a large-7. Then within that large-7, I have there are two divs that have medium-10.

These divs have a border of 1px, and for the divs with medium-10, the gutters are doubled (16px is the normal gutter width, so it is 32px). So, in the largest view, the space between the borders is wider than I would like it to be.

In the image I attached, at the top you can see the corners and gutters of the divs I am talking about. Below them are another large-13 and large-7, which don't have the medium-10 divs inside, so they look like I would like them to look.

So, my question is how can I make the medium-10 divs take the width of the large-13 and get rid of that extra gutter?

I hope that is clear.

Any help would be appreciated.

Thanks.

Nic Edwards about 5 years ago

In the Foundation CSS, by default, a nested row will not add a margin as the outermost div does.

.row .row {
  width: auto;
  margin-left: -0.9375rem;
  margin-right: -0.9375rem;

Brett Peary about 5 years ago

Ok, now I think I really figured it out.

The two divs inside the large-7 column were not contained in another div with the class .row. When I added that div it all got pretty.

Hope it helps someone.

Brett Peary about 5 years ago

Actually, I didn't solve it at all. I just created another problem. The div that I took the large-20 from has no gutter, so I reverted it back to the the way it was. Still looking for a solution.

Brett Peary about 5 years ago

I figured out what I did wrong.

I am trying to do something that is a bit complex and in that first large-13 I was talking about I have two other divs. The two divs in that should take up who whole width of the large-13 and because this is a bit new to me, I had put another large-20 on that div.

I solved the problem by taking off the large-20 and adding a class of row to the second div in there.

Just in case anyone is having a similar problem, I thought I'd explain.

Cheers.