Невозможно уменьшить ширину при использовании медиазапросов для контактной формы - PullRequest
Новая
       7

Невозможно уменьшить ширину при использовании медиазапросов для контактной формы

0 голосов
/ 14 апреля 2019

Создана контактная форма. Чтобы сделать его отзывчивым, я добавил посредственный запрос на 768 пикселей, чтобы уменьшить ширину поля ввода. Но это не меняется.

Я приложу код ниже для вашей справки 

<div class="form-container">
    <h1>send us a message</h1>
    <form class="form">
      <input id="name" type="text" placeholder="Full Name">
      <input id="email" type="text" placeholder="E-Mail">
      <textarea id="message" cols="30" rows="10" placeholder="Message"></textarea>
      <button type="submit"><i class="fa fa-paper-plane" aria-hidden="true"></i>SEND</button>
    </form>
  </div>

Я использовал SCSS для оформления своей контактной формы ... 

.form-container {
  margin: 6rem 0;
  height: auto;

  h1 {
    color: $header-main;
    text-align: center;
    font-family: $primary-font;
    text-transform: capitalize;
    font-size: 2.3rem;
    letter-spacing: 1px;

    &:after {
      @include shortBorder(10rem, 1rem, 3px, #111);
      margin-bottom: 5rem;
    }
  }


  .form {
    input[type="text"],
    textarea,button {
      display: block; 
      margin: 2rem auto;
      width: 600px;
      padding: 1rem;
      border-radius: 1rem;
      border: 1px solid $plane-white;
      box-shadow: 2px 3px 3px 3px #ccc;
      outline: none;
      transition: width 0.2s ease-in-out;
    }

    input:hover,
    textarea:hover {
      width: 620px;
    }


    ::placeholder { 
      color: rgb(155, 148, 146);
      font-weight: 900;
      font-family: 'Roboto';
    }

    button {
      background-color: $header-main;
      color: $plane-white;
      width: 140px;
      box-shadow: none;
      i {
        margin-right: 0.5rem;
      }
    }
  }

  button:hover {
    cursor: pointer;
    width: 160px;
  }
}

Медиа-запрос в контактной форме .. должен уменьшиться до 500px с 600px. 

@mediaqueries screen and (max-width:768px) {
    .form {
    width: 500px;
}
}

1 Ответ

0 голосов
/ 14 апреля 2019

Есть множество вещей, которые препятствуют сокращению входных данных.

  1. Вы установили строки и столбцы в качестве параметров размера в текстовой области. <textarea id="message" cols="30" rows="10" placeholder="Message"></textarea> Это действует как ширина и высота в HTML. Вы должны удалить это и установить его с помощью CSS.
  2. В зависимости от box-model, который вы используете, margin & padding может ДОБАВЛЯТЬСЯ к общей ширине ваших элементов.
  3. Ваши медиазапросы не нацелены на правильные элементы, поэтому они не применяются должным образом.

Базовый CSS: (вы изменяете ширину входных данных ВНУТРИ .form) 

.form input[type="text"], 
.form textarea,
.form button {
    width: 600px;
}

медиазапрос ( вы меняете форму, а не входные данные ) 

.form {
    width: 500px;
}
...