I finished the Survey Form Project and passed. But I tried to add media queries to it to get some practice on responsive web design. I know I should have structured the HTML/CSS to be mobile first but since I did not plan to make this one responsive I did not structure the HTML/CSS to be mobile first and did it the desktop first option and in the end thought I would add media queries to make it responsive. The problem with the page is the input type boxes seem to stretch outside its area which looks ugly. I think it looks okay for smaller 700px screens but needs fix for screens of 1000px or above. It looks fine on my maximised desktop window but when I minimize the window the problem occurs. I have pasted my code below. If anyone can suggest how to fix that will help me learn CSS better as a newbie.
HTML Code
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Survey Form</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<h1 id="title">freeCodeCamp Survey Form</h1>
<p id="description">Thank you for taking the time to help us improve the platform</p>
<main id="form-container">
<form action="get opinion to improve platform" id="survey-form">
<!-- Label tag creates a rectangular box with the word Name before it -->
<div class="namecontainer">
<label for="name" id="name-label">Name
<!-- Using input type as text indicates that only text characters, but not numbers are accepted as input. If a number is keyed in, it will throw up an error -->
<input type="text" required placeholder="Enter your name" id="name" name="name">
</label>
</div>
<div class="emailcontainer">
<label for="email" id="email-label">Email
<!-- Using input type as email indicates that only email addresses in email format are accepted. If any non-email formatted characters are keyed in, it will throw up an error -->
<input type="email" required placeholder="Enter your email" id="email" name="email">
</label>
</div>
<div class="agecontainer">
<label for="number" id="number-label">Age (optional)
<!-- Using input type as number indicates that the only number characters will be accepted. If any non-number characters are keyed in, it will throw up an error -->
<input type="number" required placeholder="Age" id="number" name="number" min="1" max="200">
</label>
</div>
<div class="dropdown-container">
<label for="current role" class="currentrole">Which option best describes your current role?</label>
<select name="dropdown" required id="dropdown">
<!-- Use option value disabled selected to hide all the options in drop down list so that none is selected by default -->
<option value="" disabled selected>Select currrent role</option>
<option value="student">Student</option>
<option value="fulltimejob">Full Time Job</option>
<option value="fulltimelearner">Full Time Learner</option>
<option value="prefernottosay">Prefer not to say</option>
<option value="other">Other</option>
</select>
</div>
<div class="recommend-container">
<legend>Would you recommend freeCodeCamp to a friend?</legend>
<div>
<input type="radio" id="definitely" name="recommend" value="definitely">
<label for="definitely">Definitely</label>
</div>
<div>
<input type="radio" id="maybe" name="recommend" value="maybe">
<label for="maybe">Maybe</label>
</div>
<div>
<input type="radio" id="notsure" name="recommend" value="notsure">
<label for="notsure">Not sure</label>
</div>
</div>
<div class="fav-feature">
<label for="favorite-feature">What is your favorite feature of freeCodeCamp?</label>
<select name="dropdown" required id="dropdown2">
<!-- Use option value disabled selected to hide all the options in drop down list so that none is selected by default -->
<option value="" disabled selected>Select an option</option>
<option value="challenges">Challenges</option>
<option value="projects">Projects</option>
<option value="community">Community</option>
<option value="opensoure">Open Source</option>
</select>
</div>
<div class="checkbox-container">
<p>What would you like to see improved? (Check all that apply)</p>
<label>
<input type="checkbox" name="like" value="frontendprojects">Front-end Projects
</label>
<div>
<label>
<input type="checkbox" name="like" value="backendprojects">Back-end Projects
</label>
</div>
<div>
<label for="improve">
<input type="checkbox" name="like" value="datavisualization">Data Visualization
</label>
</div>
<div>
<label for="improve">
<input type="checkbox" name="like" value="challenges">Challenges
</label>
</div>
<div>
<label for="improve">
<input type="checkbox" name="like" value="opensourcecommunity">Open Source Community
</label>
</div>
<div>
<label for="improve">
<input type="checkbox" name="like" value="gitterhelprooms">Gitter help rooms
</label>
</div>
<div>
<label for="improve">
<input type="checkbox" name="like" value="videos">Videos
</label>
</div>
<div>
<label for="improve">
<input type="checkbox" name="like" value="citymeetups">City Meetups
</label>
</div>
<div>
<label for="improve">
<input type="checkbox" name="like" value="wiki">Wiki
</label>
</div>
<div>
<label for="improve">
<input type="checkbox" name="like" value="forum">Forum
</label>
</div>
<div>
<label for="improve">
<input type="checkbox" name="like" value="additionalcourses">Additional Courses
</label>
</div>
</div>
<div>
<label for="comment" class="textarea">Any comments or suggestions?</label>
<textarea rows="7" cols="118" name="comment" id="comment">Enter your comment here...</textarea>
<button type="submit" id="submit">Submit</button>
</div>
</form>
</main>
<script src="https://cdn.freecodecamp.org/testable-projects-fcc/v1/bundle.js"></script>
</body>
</html>
CSS
* {
box-sizing: border-box;
}
body {
margin: 0;
padding: 0;
/* background-color: #A4A8A3; */
font-family: Arial, Helvetica, sans-serif;
background-image: url(image.jpg);
background-size: inherit;
position: relative;
color: #47C2FF;
}
#form-container {
background-color: lightyellow;
border: solid 1px blue;
width: 70%;
margin: auto;
padding: 2em;
}
#title {
font-family: Arial, Helvetica, sans-serif;
font-size: 2rem;
letter-spacing: 2pt;
font-weight: 800;
text-align: center;
}
#description {
font-family: Georgia, 'Times New Roman', Times, serif;
font-weight: bold;
font-style: italic;
text-align: center;
}
/* Flex Properties */
.namecontainer #name-label {
display: flex;
justify-content: space-between;
flex-direction: column;
}
#name, #email, #number, #dropdown {
width: 850px;
margin: 0.75em 0;
}
.emailcontainer #email-label {
display: flex;
justify-content: space-between;
flex-direction: column;
}
.agecontainer #number-label {
display: flex;
justify-content: space-between;
flex-direction: column;
}
.dropdown-container .currentrole {
display: flex;
justify-content: space-between;
flex-direction: column;
}
div .textarea {
display: flex;
align-items: auto;
}
div, .fav-feature {
margin: 6px 0;
}
button {
display: inline-block;
padding: 15px 32px;
background-color: #4CAF50;
width: 850px;
font-weight: bold;
font-size: 1rem;
}
@media (max-width: 700px) {
#name, #email, #number, #dropdown, textarea, button {
width: 60vmin;
}
}
@media (min-width: 1000px) {
#name, #email, #number, #dropdown, textarea, button {
width: 65vmax;
}
}
