CODEWITHSUNDEEP
htmlcssresponsive-design
Adam
Adam

Reputation: 3

CSS Contact Form not being responsive

I have created a Contact Form, everything looks somewhat fine, the way I want it but having issues. The Form is not being responsive when re-sizing/scale the browser down. I have messed around, I think a little too much with the code to the point that I have no clue what i'm doing or have done. I'm about to lose my mind!

When I re-size the browser, the labels go outside of the container it's in. The submit button is also not centering even when I try margin: 0 auto;

I will post the HTML & CSS along with my CodePen below. Thanks for any help!

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;
}

Upvotes: 0

Views: 583

Answers (1)

IndPendent
IndPendent

Reputation: 309

You have a problem with the width of several elements, you're setting fixed widths and it repercusses on mobile resolutions, also with the overflow of the container it make the childs to hide inside the parent.

A good solution for a responsive mode is to set the widths to 100% of the parent and setting a max width for greater resolutions.

I made a fork of your Codepen.

Important: most of the problem also is, make sure to set the box-sizing of global elements. i.e. * { box-sizing: border-box;}

Hope this helps.

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

Upvotes: 2

Related Questions