1

Не могу разобраться, хочу чтобы на брекпоинте 320-768 форма сужалась и выглядела посередине,но верстка ломается,что не так?

{
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

body {
  background: #1B2473;
  color: #787878;
  font-family: Roboto;
  font-size: 16px;
}

.wrapper {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100vh;
  padding: 20px;
}

.form {
  width: 600px;
  padding: 26px 46px 26px 45px;
  background: #fff;
  border-radius: 20px;
  box-shadow: 0px 0px 40px 10px rgba(0, 0, 0, 0.25);
}

.form__title {
  text-align: center;
  font-size: 50px;
  font-weight: bold;
  line-height: 100%;
  margin-bottom: 17px;
}

.form__group {}

.form__input_mg-bottom-13 {
  margin-bottom: 13px;
}

.form__input_mg-bottom-16 {
  margin-bottom: 16px;
}

.form__label-input {
  font-weight: bold;
  line-height: 100%;
}

.form__input {
  width: 509px;
  height: 49px;
  border: 2px solid #787878;
  color: #787878;
  border-radius: 10px;
  margin-top: 3px;
  padding: 0 0 0 10px;
  font-size: 28px;
}

.form__input::placeholder {
  font-weight: bold;
  line-height: 129%;
  color: #cccccc;
}

.form__label-checkbox {
  font-size: 14px;
  line-height: 114%;
  margin-bottom: 52px;
  display: inline-flex;
  align-items: center;
  align-content: center;
}

.form__checkbox {
  margin-right: 10px;
  width: 24px;
  height: 24px;
  border: 2px solid #787878;
  border-radius: 7px;
}

.form__btn {
  width: 180px;
  text-align: center;
  color: #fff;
  font-size: 24px;
  font-weight: bold;
  line-height: 67%;
  background: #1A226B;
  border: none;
  border-radius: 10px;
  cursor: pointer;
  padding: 18px 56px 18px 55px;
}

.form__btn:hover {
  background: #3e4588;
}

.form__button-block {
  display: flex;
  justify-content: center;
  align-items: center;
}


/* ------------- 320 - 768------------------------- */

@media (max-width: 768px) {
  .form {
    max-width: 728px;
    height: 100%;
  }
  .form__title {
    font-size: 60px;
    line-height: 83%;
    margin-bottom: 13px;
  }
  .form__group {}
  .form__label-input {
    font-size: 24px;
    line-height: 67%;
  }
  .form__input {
    max-width: 638px;
    margin-top: 8px;
  }
  .form__input::placeholder {
    color: #cccccc;
  }
  .form__label-checkbox {
    font-size: 18px;
    line-height: 89%;
    margin-bottom: 64px;
  }
  .form__checkbox {
    width: 32px;
    height: 32px;
  }
  .form__button-block {}
  .form__btn {
    max-width: 220px;
    min-height: 80px;
    padding: 32px 64px;
    display: flex;
    justify-content: center;
    align-items: center;
  }
}
<body>
  <div class="wrapper">
    <form action="#" class="form">

      <h1 class="form__title">Вход</h1>

      <div class="form__group">
        <label for="" class="form__label-input">Email</label>
        <input class="form__input form__input_mg-bottom-13" name="email" type="email" value="[email protected]" disabled>
      </div>

      <div class="form__group">
        <label for="" class="form__label-input">Пароль</label>
        <input class="form__input form__input_mg-bottom-16" name="pass" type="password" placeholder="Введите пароль" required>
      </div>

      <div class="form__group">
        <label class="form__label-checkbox">
                    <input class="form__checkbox" name="checkbox" type="checkbox"> 
                    Я согласен получать обновления на почту
                </label>
      </div>
      <div class="form__button-block">
        <button class="form__btn" type="submit">Войти</button>
      </div>
    </form>
  </div>
</body>

1 ответ 1

1

Это происходит из-за использования фиксированного значения width

Пример

{
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

body {
  background: #1B2473;
  color: #787878;
  font-family: Roboto;
  font-size: 16px;
}

.wrapper {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100vh;
  padding: 20px;
}

.form {
  max-width: 600px;
  width: 100%;
  padding: 26px 46px 26px 45px;
  background: #fff;
  border-radius: 20px;
  box-shadow: 0px 0px 40px 10px rgba(0, 0, 0, 0.25);
}

.form__title {
  text-align: center;
  font-size: 50px;
  font-weight: bold;
  line-height: 100%;
  margin-bottom: 17px;
}

.form__group {}

.form__input_mg-bottom-13 {
  margin-bottom: 13px;
}

.form__input_mg-bottom-16 {
  margin-bottom: 16px;
}

.form__label-input {
  font-weight: bold;
  line-height: 100%;
}

.form__input {
  max-width: 509px;
  width: 100%;
  height: 49px;
  border: 2px solid #787878;
  color: #787878;
  border-radius: 10px;
  margin-top: 3px;
  padding: 0 0 0 10px;
  font-size: 28px;
}

.form__input::placeholder {
  font-weight: bold;
  line-height: 129%;
  color: #cccccc;
}

.form__label-checkbox {
  font-size: 14px;
  line-height: 114%;
  margin-bottom: 52px;
  display: inline-flex;
  align-items: center;
  align-content: center;
}

.form__checkbox {
  margin-right: 10px;
  width: 24px;
  height: 24px;
  border: 2px solid #787878;
  border-radius: 7px;
}

.form__btn {
  width: 180px;
  text-align: center;
  color: #fff;
  font-size: 24px;
  font-weight: bold;
  line-height: 67%;
  background: #1A226B;
  border: none;
  border-radius: 10px;
  cursor: pointer;
  padding: 18px 56px 18px 55px;
}

.form__btn:hover {
  background: #3e4588;
}

.form__button-block {
  display: flex;
  justify-content: center;
  align-items: center;
}


/* ------------- 320 - 768------------------------- */

@media (max-width: 768px) {
  .form {
    max-width: 728px;
    height: 100%;
  }
  .form__title {
    font-size: 60px;
    line-height: 83%;
    margin-bottom: 13px;
  }
  .form__group {}
  .form__label-input {
    font-size: 24px;
    line-height: 67%;
  }
  .form__input {
    max-width: 638px;
    margin-top: 8px;
  }
  .form__input::placeholder {
    color: #cccccc;
  }
  .form__label-checkbox {
    font-size: 18px;
    line-height: 89%;
    margin-bottom: 64px;
  }
  .form__checkbox {
    width: 32px;
    height: 32px;
  }
  .form__button-block {}
  .form__btn {
    max-width: 220px;
    min-height: 80px;
    padding: 32px 64px;
    display: flex;
    justify-content: center;
    align-items: center;
  }
}
<body>
  <div class="wrapper">
    <form action="#" class="form">

      <h1 class="form__title">Вход</h1>

      <div class="form__group">
        <label for="" class="form__label-input">Email</label>
        <input class="form__input form__input_mg-bottom-13" name="email" type="email" value="[email protected]" disabled>
      </div>

      <div class="form__group">
        <label for="" class="form__label-input">Пароль</label>
        <input class="form__input form__input_mg-bottom-16" name="pass" type="password" placeholder="Введите пароль" required>
      </div>

      <div class="form__group">
        <label class="form__label-checkbox">
                    <input class="form__checkbox" name="checkbox" type="checkbox"> 
                    Я согласен получать обновления на почту
                </label>
      </div>
      <div class="form__button-block">
        <button class="form__btn" type="submit">Войти</button>
      </div>
    </form>
  </div>
</body>

3
  • Спасибо за помощь, разобрался как это работает 23 ноя 2021 в 11:31
  • @ИгорьТрубников не плохо бы отмечать ответы, которые вам помогли принятыми.
    – Rudi
    23 ноя 2021 в 11:49
  • @ИгорьТрубников здесь не принято говорить "спасибо" в комментариях, вы можете оценить ответ и отметить его как принятый. Что делать с ответами на мой вопрос - более подробно раскрывает данную тему
    – Dmitry
    23 ноя 2021 в 20:30

Ваш ответ

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

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