Skeleton icon indicating copy to clipboard operation
Skeleton copied to clipboard

Setting a different gutter size

Open unaor opened this issue 8 years ago • 1 comments

is there a way to change the gutter size between columns? for example my fullscreen .container max-width: none width: 95%

and then my html from from the examples

<div class="row">
     <div class="six columns">
       <label for="exampleEmailInput">Your email</label>
       <input class="u-full-width" placeholder="[email protected]" id="exampleEmailInput" type="email">
     </div>
     <div class="six columns">
       <label for="exampleRecipientInput">Reason for contacting</label>
       <select class="u-full-width" id="exampleRecipientInput">
         <option value="Option 1">Questions</option>
         <option value="Option 2">Admiration</option>
         <option value="Option 3">Can I get your number?</option>
       </select>
     </div>
 </div>

results in a 4% margin-left which i find too big i would prefer for example 2% but then the second select is, too short

unaor avatar Dec 15 '16 17:12 unaor

.columns { margin-left: 4%; } .column:first-child, .columns:first-child { margin-left: 0; }

The second child is the margin-left that you are adjusting, the first child is set to 0. Try overriding the .column:first-child margin-left if you wish to have margin on the first element in the column.

dashcraft avatar Jan 03 '17 02:01 dashcraft