CODEWITHSUNDEEP
csszurb-foundation
Gediminas Šukys
Gediminas Šukys

Reputation: 7391

Remove padding for first and last column in row

I have a situation where the grid can't have an outside left and right padding.

How to set padding-left:0; for first column in line and set padding-right:0. This should also when screen changes... Or make similar result.

<div class="row line">
  <div class="large-2 medium-3 small-4 columns"></div>
  <div class="large-2 medium-3 small-4 columns"></div>
  <div class="large-2 medium-3 small-4 columns"></div>
  <div class="large-2 medium-3 small-4 columns"></div>
</div>
  1. line for large screen
  2. line for medium screen
  3. line for small screen

Yellow space should be with no padding, white spaces has default foundation padding.

enter image description here

Upvotes: 5

Views: 3191

Answers (2)

squashriddle
squashriddle

Reputation: 176

One way to achieve this would be to target the first and last columns.

.row.line > .columns:first-child {
  padding-left: 0;
}
.row.line > .columns:last-child {
  padding-right: 0;
}

Another option would be to create a class to apply to the first and last columns.

<div class="row line">
  <div class="large-2 medium-3 small-2 columns column-first"></div>
  <div class="large-2 medium-3 small-2 columns"></div>
  <div class="large-2 medium-3 small-2 columns"></div>
  <div class="large-2 medium-3 small-2 columns column-last"></div>
</div>

.column-first {
  padding-left: 0;
}
.column-last {
  padding-right: 0;
}

Upvotes: 7

cport1
cport1

Reputation: 1160

You can accomplish this by nesting another .row inside of your .row. When you do this, you get something like:

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

Upvotes: 0

Related Questions