Menu icon Foundation
Add left + right screen padding after row collapse

Hi,

When collapsing a row, everything gets pushed to the edges of the screen on smaller screens. 

How can I collapse a row and keep a padding on the left and right side of my screen.

I tried putting my row into a container with both classes .row .columns" but this is not working.

Putting it into a div with class .columns is adding too much padding I believe.

Thanks again

Jimmy

flex gridrowcollapsepaddingleftrightscreen

Hi,

When collapsing a row, everything gets pushed to the edges of the screen on smaller screens. 

How can I collapse a row and keep a padding on the left and right side of my screen.

I tried putting my row into a container with both classes .row .columns" but this is not working.

Putting it into a div with class .columns is adding too much padding I believe.

Thanks again

Jimmy

Corey Schaaf over 3 years ago

The docs make this pretty clear. Check out the info below. 

Collapse/Uncollapse Rows

The .collapse class lets you remove column gutters (padding).

There are times when you won't want each media query to be collapsed or uncollapsed. In this case, use the media query size you want and collapse or uncollapse and add that to your row element. Example shows no gutter at small media size and then adds the gutter to columns at medium.

<div class="row medium-uncollapse large-collapse">
  <div class="small-6 columns">
    Removes gutter at large media query
  </div>
  <div class="small-6 columns">
    Removes gutter at large media query
  </div>
</div>

Jimmy G over 3 years ago

Hi, thanks for your answer.

I did read the docs before I posted this. I only want to collapse the space between the columns but not the space between the screen edge and the first columns or the last column and the screen edge.

Has foundation a solution fort his or do I have to add the padding manually?

Thanks

 

Jimmy

Jimmy G over 3 years ago

My mistake, I was using .medium-collapse on the row, .collapse seems to do the job for me...