Menu icon Foundation
Remove Spacing On Panel

What is the best method to remove the spacing on the side of a panel? I have three in a Foundation Row, and I would like the row to look like a single row instead of three columns in a row.

I have attached images of what it looks like now, and what I would like it to look like. The first shows the three "columns", the second image shows what I'd like it to look like.

Suggestions?

Steve

Row sep

Row one

            

           <div class="row">
      <div class="large-3 columns">
          <div class="panel">Section 1</div>
      </div>
      <div class="large-6 columns">
          <div class="panel">Section 2</div>
      </div>
      <div class="large-3 columns">
          <div class="panel">Section 3</div>
      </div>
  </div>

panel sites

What is the best method to remove the spacing on the side of a panel? I have three in a Foundation Row, and I would like the row to look like a single row instead of three columns in a row.

I have attached images of what it looks like now, and what I would like it to look like. The first shows the three "columns", the second image shows what I'd like it to look like.

Suggestions?

Steve

Row sep

Row one

            

           <div class="row">
      <div class="large-3 columns">
          <div class="panel">Section 1</div>
      </div>
      <div class="large-6 columns">
          <div class="panel">Section 2</div>
      </div>
      <div class="large-3 columns">
          <div class="panel">Section 3</div>
      </div>
  </div>
Jordan Bommelje over 3 years ago

Hey Steve, I can't be too sure what you're looking to accomplish based on your second image. if you'd like to remove the padding, you could collapse your row and see if that works for you.

   <div class="row collapse">
      <div class="large-3 columns">
          <div class="panel">Section 1</div>
      </div>
      <div class="large-6 columns">
          <div class="panel">Section 2</div>
      </div>
      <div class="large-3 columns">
          <div class="panel">Section 3</div>
      </div>
  </div>

James Stone over 3 years ago

@Jordan Bommelje is correct. The method I usually use is to put the panel class on the column instead of nesting it within it.

Steve Valet over 3 years ago

Thanks Jordan. Giving that a try.

Basically, I like the basic formatting of the "Panel", but wanted to format it a bit to fit my requirements. In a nutshell, I want to have a row with three columns that I can place content in.

pretty basic stuff, but being new to Foundation, I just wanted to see if I was approaching the correct way.