Создайте макет с двумя столбцами в точке останова, используя Susy 2

Question

У меня есть базовая контактная форма, которую я бы хотел разместить на экранах меньшего размера с двухколоночной разметкой больших размеров.

Мои первые три метки и входные данные должны идти в первый столбец, а моя текстовая область и сопровождающая метка должны идти во второй столбец. Представление должно быть также ниже текстовой области.

Но по какой-то причине мое поле электронной почты появляется над текстовой областью, несмотря на то, что я считаю, что CSS должен диктовать.

Вот мой HTML:

    <form method="post" class="uniForm">

    <div id="div_id_name" class="ctrlHolder">

            <label for="id_name" class="requiredField">
                Your name<span class="asteriskField">*</span>
            </label>

            <input class="textinput textInput" id="id_name" maxlength="100" name="name" type="text" />

    </div>

    <div id="div_id_email" class="ctrlHolder">

            <label for="id_email" class="requiredField">
                Your email address<span class="asteriskField">*</span>
            </label>

            <input class="emailinput" id="id_email" maxlength="200" name="email" type="email" />

    </div>

    <div id="div_id_phone" class="ctrlHolder">

            <label for="id_phone" >
                Phone number
            </label>

            <input type="tel" name="phone" placeholder="555-555-5555" class="phonenumberinput" id="id_phone">

    </div>

    <div id="div_id_body" class="ctrlHolder">

            <label for="id_body" class="requiredField">
                Your message<span class="asteriskField">*</span>
            </label>

            <textarea class="textarea" cols="40" id="id_body" name="body" rows="10">
</textarea>

    </div>

        <input type="submit" value="&#x25b6; Submit">
    </form>

И вот мой SCSS:

$susy: (
    columns: 1,
    gutters: 1/8,
    gutter-position: inside,
    //global-box-sizing: border-box,
    debug: (
        image: hide,
        color: rgba(#66f, .25),
        output: background,
        toggle: top right,
    ),
);

$desktop: layout(auto 2 1/8 inside);

$md_desktop: 970px;

section#contact {
    @include span(1);
    margin-bottom: 25px;

    h2 {
        font-family: $oswald_font;
        text-transform: uppercase;
        color: $red;
        font-size: 28px;
        font-weight: 400;
        margin-bottom: 25px;
        letter-spacing: 2px;
    }

    p {
        font-family: $oswald_font;
        font-weight: 300;
        font-size: 16px;
        line-height: 1.7em;
        margin-bottom: 15px;
    }

    form {
        margin-top: 25px;
        margin-bottom: 25px;

        @include breakpoint($md_desktop) {
            @include layout($desktop);
            @include container(show);
        }

        label {
            text-transform: uppercase;
            font-family: $oswald_font;
            font-weight: 400;
            display: block;
            margin: 10px 0;
            font-size: 14px;
            letter-spacing: 1px;
        }

        input {
            height: 25px;
        }

        input, textarea {
            display: block;
            width: 100%;
            background-color: $blue;
            border: 1px solid #DDD;
            color: white;

            &:focus {
                border: 1px solid rgba(247,220,112,1);
                box-shadow: 0 0 5px rgba(247,220,112,1);
                outline: none;
            }
        }

        #div_id_name, #div_id_email, #div_id_phone  {

            @include breakpoint($md_desktop) {
                @include span(1 of 2);
            }
        }

        #div_id_body {

            @include breakpoint($md_desktop) {
                @include span(1 of 2 at 2);
            }
        }

        input[type="submit"] {
            @include clearfix;
            font-family: $oswald_font;
            cursor: pointer;
            letter-spacing: 4px;
            float: right;
            width: 50%;
            background-color: red;
            border: none;
            color: white;
            text-transform: uppercase;
            font-size: 16px;
            padding: 0;
            margin-top: 25px;

            &:hover {
                background-color: darken($red, 5%);
            }

            @include breakpoint($md_desktop) {
                @include span(1 of 2 at 2);
            }
        }
    }
}

Answer 1

Сьюзи просто использует CSS-плавающие объекты для чего-то подобного, поэтому не может делать ничего, что не могут делать плавающие объекты. Когда у вас есть три предмета подряд, с плавающей точкой на 50%, они сначала будут складываться рядом друг с другом. Вы можете исправить это, добавив clear из left или же both чтобы убедиться, что они располагаются вертикально, но тогда вы не можете перемещать последнее поле. Я бы, вероятно, сделал что-то вроде этого (внутри вашей точки останова):

.name,
.email,
.phone {
  @include span(1 of 2);
  @include break;
}

.message {
  @include push(1 of 2);
}

Я не использовал ваши точные классы там, пытаясь облегчить чтение. Надеюсь, это имеет смысл. break Суси миксин, который применяется clear: both;, Это плавает и складывает первые три поля слева. Поскольку неплавающие элементы обтекают всплывающие, последнее поле автоматически перемещается вверх - вы просто хотите толкнуть его вправо, чтобы оно не пыталось перекрываться.