Контактная форма CSS не отвечает - PullRequest
Новая
       6

Контактная форма CSS не отвечает

0 голосов
/ 20 февраля 2019

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

Когда я изменяю размер браузера, ярлыки выходят за пределы контейнера, в котором он находится. Кнопка отправки также не центрируется, даже когда я пытаюсь margin: 0 auto;

Я опубликую HTML & CSS вместе с моим CodePen ниже.Спасибо за любую помощь!

CodePen https://codepen.io/vCoCo/pen/MLReKK?editors=1100

HTML 

<section id="contact">
  <div class="container">
    <form id="contactForm" action="contactform.php" method="post">
      <h2> Get In Touch! </h2>

      <div class="details">
        <label for="firstName"> First Name </label>
        <input type="text" id="firstName" name="firstName" placeholder="Enter First Name..." required>
      </div>

      <div class="details">
        <label for="lastName"> Last Name </label>
        <input type="text" id="lastName" name="lastName" placeholder="Enter Last Name..." required>
      </div>

      <div class="details">
        <label for="email"> Email </label>
        <input type="email" id="email" name="email" placeholder="Enter Email..." required>
      </div>

      <div class="details">
        <label for="textMessage"> Message </label>
        <textarea id="textMessage" name="textMessage" placeholder="Enter Message In Here..." required></textarea>
      </div>

      <input type="submit" value="Submit Message">

    </form>
  </div>
</section>

CSS 

body{
  background-color: grey;
}
/**** GLOBAL ****/
.container{
  max-width: 80%;
  margin: auto;
  overflow: hidden;
  border: 2px solid white;
}

/********** CONTACT FORM **********/
#contact{
  max-width: 80%;
  margin: 100px auto;
  border: 1px dashed orange;
}

#contact .container{
  width: 500px;
  margin: 100px auto;
  display: flex;
  flex-wrap: wrap;
  flex-direction: row;
}

#contactForm{
  margin: 0 auto;
}

#contactForm h2{
  text-align: center;
  margin-bottom: 10px;
}

.details{
  max-width: 500px;
  margin: 15px;
  padding: 10px;
  border: solid 1px #ff0000;
  overflow: hidden;

}

label{
  margin-bottom: 10px;
}

input[type=text], input[type=email]{
  width: 400px;
  padding: 12px 20px;
  margin: 8px 0;
  border: 2px solid;
  border-radius: 4px;
}

input[type=submit]{
  width: 200px;
  padding: 10px 20px;
  color: #fff;
  background-color: #000;
  border: 2px solid #fff;
  border-radius: 10px;
  font-family: inherit;
  cursor: pointer;
}

textarea{
  width: 300px;
  height: 200px;
  resize: none;
  font-size: 16px;
}

#contactForm textarea::placeholder{
  font-size: 16px;
}

1 Ответ

0 голосов
/ 20 февраля 2019

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

Хорошим решением для адаптивного режима является установка ширины на 100% родительского и установка максимальной ширины для больших разрешений.

Я сделал развилку вашего Codepen.

Важно: большая часть проблемы также заключается в том, чтобы установить box-sizing глобальных элементов.т.е. * { box-sizing: border-box;}

Надеюсь, это поможет.

Codepen https://codepen.io/devlumberjack/pen/rPbMzr?editors=1100

...