Menu icon Foundation
Inner-margin on columns

2 columns inner margin

Hello All.

I'm new to Foundation and I have this problem that seems common to me but I haven't found an example in the Docs or here in the Forums.

I have row with 2 columns. I want the columns to span the whole width of the row and have a margin between them. This way they align with the rows above and beneath.

The default options add margins to both sides of the columns, which doesn't work for me because then the columns don't align with the other rows. I discovered the class "collapse' which removes the default margins, but I still need that margin between the 2 columns.

I can fix this creating my own classes and modifying my markup a little bit, but I want to make sure Foundation doesn't do this for me somehow.

Do you have any advice or best practice for handling this scenario?

I've attached an image to show you what my design calls for.

Thanks!

marginsgrids

2 columns inner margin

Hello All.

I'm new to Foundation and I have this problem that seems common to me but I haven't found an example in the Docs or here in the Forums.

I have row with 2 columns. I want the columns to span the whole width of the row and have a margin between them. This way they align with the rows above and beneath.

The default options add margins to both sides of the columns, which doesn't work for me because then the columns don't align with the other rows. I discovered the class "collapse' which removes the default margins, but I still need that margin between the 2 columns.

I can fix this creating my own classes and modifying my markup a little bit, but I want to make sure Foundation doesn't do this for me somehow.

Do you have any advice or best practice for handling this scenario?

I've attached an image to show you what my design calls for.

Thanks!

Steve Trask about 5 years ago

Hi,

I agree with what you are saying I usually have global classes of

.no-pad-right {
padding-right: 0;
}
.no-pad-left{
padding-left: 0;
}

So you can do the following with the prototype class of panel:
http://cdpn.io/DbyCL

Do remember though that this will have to be changed in the media queries but if they are global you sort it everywhere you use it rather than specific elements

hope this helps

Fernando Galeano about 5 years ago

Thanks for your reply, Steve. This is similar to what I thought I'd do if there was no other Foundation alternative so it's good to confirm that'd be a good approach.

I did not think about the media queries, though, so I'll keep those in mind.

Thanks!

Greg Blass about 5 years ago

I came here to ask the same question. If anyone has any better solutions than this, I'm all ears! Basically I'm just going to have to write responsive overrides.

I really don't think there should be padding-left on the first column and pading-right on the last column in any case.

I feel like that should be default?

Greg Blass about 5 years ago

OK I've figured out a much better answer to this one.

If you use .row as your main container, then when you use row again for your columns inside that row, the following CSS will be applied:

.row .row {
margin-left: -0.9375rem;
margin-right: -0.9375rem;
}

This will remove the left and right gutter width automatically that you are looking to get rid of.

This confused me at first as well. I actually used chrome dev tools to look at the code behind this very forum to figure it out.

Hope this helps!

Marc McGee about 5 years ago

To further elaborate on Greg's super helpful tip.

Proper markup would be as follows. Please correct me if I am wrong—though working on my side..

<div class="row">
<div class="row">
<div class ="large-12 columns">
Image or content here would be full bleed left and right. Awesome!
</div>
</div>
</div>

Martin Luna over 4 years ago

.row > .row did the trick!
Thanks.

coolcurrent over 4 years ago

@Marc McGee

This removes the responsiveness of the page.
I tried it and the page no longer re-adjust the columns on smaller screens