I have a form coded like this I want to make it responsive in both mobile and tablet version or responsive regardless:

</div>
          <div >
            <form
              
              action="https://sheetdb.io/api/v1/it1l3r9npizts"
              method="post"
              id="sheetdb-form"
            >
              <label for="name">Name:</label>
              <input
                type="text"
                id="name"
                name="data[name]"
                placeholder="Your name"
              />
              <label for="email">Email:</label>
              <input
                type="email"
                id="email"
                name="data[email]"
                placeholder="Your email"
              />
              <label for="message">Message:</label>
              <textarea
                id="message"
                placeholder="Your message"
                rows="6"
                name="data[message]"
              ></textarea>
              <div >
                <input type="submit" value="Send Message" />
              </div>
            </form>
          </div>

with these styles in css:

.contact_section {
  width: 100%;
  height: 100%;
}
.contact_form {
  display: flex;
  align-items: center;
  flex-direction: column;
}
.contact_form label {
  margin: 15px 0;
}
.contact_form label {
  font-size: 20px;
  font-weight: 400;
}
.contact_form input,
textarea {
  width: 100%;
  padding: 10px;
  outline: none;
  resize: none;
  border: none;
  border-bottom: 1px solid var(--contrast-color);
}
input[type="text"]:focus,
textarea:focus {
  border-bottom: 2px solid var(--main-color);
}
textarea::-webkit-scrollbar {
  width: 4px;
}
textarea::-webkit-scrollbar-thumb {
  background-color: var(--contrast-color);
}
.center {
  text-align: center;
  width: 602px;
  font-size: 20px;
}
input[type="submit"] {
  margin-top: 30px;
  width: 100%;
  max-width: 200px;
  background-color: var(--netural-color);
  font-size: 17px;
  color: var(--contrast-color);
  font-weight: 400;
  cursor: pointer;
}

I have been trying to make it responsive cause my form doesn't shrink down and there isn't any padding on the left and right when the screen keeps getting smaller:

@media screen and (max-width: 768px) {
  body {
    overflow-x: hidden;
  }
  .contact_form input textarea {
    width: 70%;
    margin-top: 0;

  .home-section {
    height: 100vh;
  }
  section {
    height: 100%;
    width: 100%;
  }
}

CodePudding user response：

Based on your code I suspect the .center and it's fixed width is setting the width of your form. Just remove that width or make it responsive.

.center {
  text-align: center;
  width: 602px;
  font-size: 20px;
}

<form>
 <div >
   <input type="submit" value="Send Message" />
 </div>
</form>