html forms responsive in mobile view? - html

Question

I have a form coded like this I want to make it responsive in both mobile and tablet version or responsive regardless:
</div>
<div class="contact_form">
<form
class="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 class="center">
<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%;
}
}

Answer 1

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 class="center">
<input type="submit" value="Send Message" />
</div>
</form>