The contact form is responsive and functioning correctly for the textarea field, but there are issues with the input type=text fields on smaller screens. I attempted to address this by incorporating media queries.
Below is my code:
<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<!-- CSS styles -->
...
/* Adding media queries*/
@media (max-width: 400px) {
body {
width: 100%;
margin: 0;
padding: 0 0 2em;
}
header, .form-submit {
padding: 2% 5%;
}
}
</style>
</head>
<body>
<header>
</header>
<form class="contact-form">
<section class="form-group">
<h3>Contact Us</h3>
<ul class="form-fields">
<li><label for="name">Name:</label> <input type="text" name="name" id="name" placeholder="your full name" class="text-input"></li>
<li><label for="subject">Subject:</label> <input type="text" name="subject" id="subject" placeholder="subject" class="text-input"></li>
<li><label for="email">Email:</label> <input type="email" name="email" id="email" placeholder="confirmation email" class="text-input"></li>
<li><label for="comments">Comments:</label><textarea id="comments" name="comments" class="text-area">comments</textarea> </li>
</ul>
</section>
<section class="form-submit">
<button type="submit" class="send-btn">Send</button>
</section>
</form>
</body>
</html>