Susy Gutter Size

Question

I am brand new to using Susy. I have just downloaded and installed into my application. I am using Susy 2.2

I have trying to created a simple page/grid that has 2 columns of equal width (50%). The problem i am facing is that each column is only 44.4444% wide and the first has a margin-right of 11.111%

HTML:

<div class="container">
    <p>Welcome to my ToDo List, please sign in or register</p>

    <div class="log-in-section>
        <p>User name: <input type="text" name="username"></p>
        <p>Password: <input type="text" name="password"></p>
        <button>Log In</button>
    </div>

    <div class="register-section>
        <button>Register</button>
    </div>
</div>

CSS:

@import '_susy';

.container {
    @include container (12);
    width: 980PX;
    margin: 0 auto;     
    position: relative;
}

.log-in-section {
    @include span(1 of 2);
    border-right: 1px dashed red;

    @include breakpoint(medium) {
        @include span(1 of 1);
    }
}

.register-section {
    @include span(1 at 2 of 2);     

    @include breakpoint(medium) {
        @include span(1 of 1);
    }
}

How can i reduce the default gutter size? And how can i ensure that the border-right of the log-in-section is displayed in the middle of the screen?

Answer 1

You should take a look at the Susy settings (susydocs.oddbird.net/en/latest/settings/). The gutters setting is what you are looking for. Also, gutter-position is also worth taking a look at.

Additionally, typically (depending on the grid and the grid settings) you will need to declare the last grid column by using the last mixin:

.register-section {
    @include last;
    ... /* More styles */