CSS - Form not scaling down on mobile - html

Question

New coder here. I have a form that is scaled exactly how I want on web, but looks horrible on mobile. The form isn't scaling down. I would like the form to scale down based on a mobile devices width. Any thoughts or suggestions would be much appreciated. I have included the HTML and CSS I have below. Thank you! Also, I would prefer to do this in CSS.
HTML:
<div class="contactForm">
<form id="form" class="topBefore" method="POST" action="#">
<input id="name" type="text" name="name" placeholder="NAME">
<input id="phone" type="tel" name="phone" placeholder="PHONE">
<input id="email" type="email" name="email" placeholder="E-
MAIL">
<textarea id="messagebody" type="text" name="message"
placeholder="MESSAGE"></textarea>
<input id="submit" type="submit" name="send" value="SEND">
</form>
</div>
CSS:
.contactForm {
background-color: #FAFAFA;
width: 100%;
margin: 0 auto;
}
#form {
position: relative;
width: 500px;
margin: 0 auto;
padding-bottom: 20px;
}
input {
width: 470px;
height: 50px;
padding: 0px 15px 0px 15px;
background: transparent;
outline: none;
font-size: 14px;
color: black;
border: solid 2px #dddddd;
border-bottom: none;
letter-spacing: 2px;
background-color: white;
}
input:hover {
background: #f4f4f4;
font-size: 14px;
color: black;
letter-spacing: 2px;
border-color: #e5e5e5;
}
textarea {
width: 470px;
max-width: 470px;
height: 110px;
max-height: 110px;
padding: 15px;
letter-spacing: 2px;
background: transparent;
outline: none;
font-size: 14px;
color: #333;
background-color: white;
border: solid 1px #dddddd;
border: solid 2px #dddddd;
}
textarea:hover {
background: #f4f4f4;
color: black;
}
#submit {
width: 504px;
padding: 0;
margin: -6px 0px 0px 0px;
font-family: 'Lato', sans-serif;
font-size: 14px;
color: #333;
outline:none;
cursor: pointer;
border-top: none;
letter-spacing: 3px;
border: solid 2px #dddddd;
}
#submit:hover {
background-color: #7fbf7f;
color: black;
letter-spacing: 3px;
font-size: 15px;
border-color: #7fbf7f;
}

Answer 1

Try using media queries:
Media queries are useful when you want to apply CSS styles depending on a device's general type (such as print vs. screen), specific characteristics (such as the width of the browser viewport), or environment (such as ambient light conditions). With the huge variety of internet-connected devices available today, media queries are a vital tool for building websites and apps that are robust enough to work on whatever hardware your users have.
Example:
#media screen and (max-width: 699px) and (min-width: 520px)
Put this in your head tag:
<meta name="viewport" content="width=device-width, initial-scale=1">
This means that the browser will (probably) render the width of the page at the width of its own screen. So if that screen is 320px wide, the browser window will be 320px wide, rather than way zoomed out and showing 960px (or whatever that device does by default, in lieu of a responsive meta tag).
For more information:
https://developer.mozilla.org/en-US/docs/Web/CSS/Media_Queries/Using_media_queries
Also: https://css-tricks.com/snippets/html/responsive-meta-tag/

Answer 2

Use mobile query: allows specified CSS to be applied depending on the device https://responsivedesign.is/develop/browser-feature-support/media-queries-for-common-device-breakpoints/
You can use this common device breakpoints.