0

Столкнулся с такой проблемой, при адаптивной верстке. Дело в том, что при изменении разрешения обрезаются input'ы, при чем при с разных сторон. Раньше стояла фиксированная ширина для самих инпутов, после выставил ограничение по ширине для form, а инпутам поставил ширину 100%, но это не помогло и инпуты все равно обрезаются (и слева-справа и сверху-снизу). Тестил в диапазоне 1200px-1400px Хотелось бы понять, как сделать его нормальным...введите сюда описание изображения

body {
    margin: 0;
    padding: 0;
    font-size: 15px;
}

h1, h2, h3, h4, h5, h6 {
    font-family: 'Ubuntu', sans-serif;
    font-weight: bold;
}

div, p, input, button, form, span, a, ul, li {
    box-sizing: border-box;
}

.container {
    width: 1171px;
    margin: 0 auto;
}
.mail {
    background: #ecf3f8;
    text-align: center;
    display: flex;
    padding-bottom: 106px;
}

.mail h2 {
    font-size: 30px;
    margin-top: 100px;
}
.form {
    margin: 57px auto 0 auto;
    width: 343px;
}

.form input {
    padding-left: 14px;
    margin-bottom: 15px;
    width: 100%;
    height: 48px;
}

.button {
    width: 343px;
    height: 56px;
    background: #ffd429;
    border: none;
    font-family: 'Montserrat', sans-serif;
    font-size: 15px;
    color: #2e2a1b;
}

.button:hover {
    background: #e0b300;
}
<section class="mail">
        <div class="container">
            <h2>Форма заказа билета в будущее</h2>
            <form action="#" class="form">
                    <input type="text" placeholder="Имя" class="input" required>
                    <input type="mail" placeholder="E-mail" class="input" required>
                    <input type="tel" placeholder="Телефон" class="input" required>
                    <input type="text" placeholder="Куда я полечу в ближайшее время?" class="input" required>
                    <button type="submit" class="button">Двигаться к мечте!</button>
            </form>
        </div>
        </section>

5
  • Вашу проблему не удается воспроизвести, бордеры нормально отображаются. Уточните, что значит "при изменении разрешения"? Вы имеете ввиду масштабирование окна браузера? В каком браузере ошибка возникает?
    – xydope
    18 апр 2022 в 0:06
  • Использую хром. Проблема возникает, когда изменяю разрешения под адаптивную верстку, не знаю в общем как это точно называется. Открываю код элемента и слева сверху на телефон (Toggle device toolbar) 18 апр 2022 в 17:57
  • Подобный эффект иногда бывает, если изменен масштаб окна браузера(не 100%), попробуйте сбросить масштаб, хоткей: ctrl + 0 (ноль).
    – xydope
    20 апр 2022 в 18:38
  • 1
    Проблем с масштабом не было, именно при адаптивной верстке возникал баг. Как я понял это баг движка хрома и проблема пофиксилась добавлением своего бордера к инпуту 23 апр 2022 в 12:52
  • Вы можете это решение написать в ответ и пометить вопрос как решенный.
    – xydope
    23 апр 2022 в 13:19

1 ответ 1

0

Решил проблему путем добавления border к input в css.

1
  • Ваш ответ можно улучшить с помощью дополнительной информации. Пожалуйста, нажмите править для добавления подробностей, например, цитат или документации, чтобы другие могли подтвердить правильность вашего ответа. Вы можете найти дополнительную информацию о том, как писать хорошие ответы в Справке. 23 апр 2022 в 19:46

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge you have read our privacy policy.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.