css - Avoid padding for first and last column in line -
css - Avoid padding for first and last column in line -
i have situation grid can't have outside left , right padding.
how set padding-left:0; first column in line , set padding-right:0. should when screen changes... or create 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>
line big screen line medium screen line little screen yellow space should no padding, white spaces has default foundation padding.
one way accomplish target first , lastly columns.
.row.line > .columns:first-child { padding-left: 0; } .row.line > .columns:last-child { padding-right: 0; }
another alternative create class apply first , lastly 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; }
css zurb-foundation
Comments
Post a Comment