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

Popular posts from this blog

formatting - SAS SQL Datepart function returning odd values -

c++ - Apple Mach-O Linker Error(Duplicate Symbols For Architecture armv7) -

php - Yii 2: Unable to find a class into the extension 'yii2-admin' -