Skeleton
Skeleton copied to clipboard
Setting a different gutter size
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
.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.