Tell us what’s happening:
Describe your issue in detail here.
Hey All,
In building the survey form, I’m having some trouble with the CSS part of the project. The HTML was pretty straightforward for me but I feel kind of lost with the CSS design.
I’m trying to figure out the following, for starters:
-
How to spread out the spacing of the elements in the form
-
Aligning the input areas, radio buttons, checkboxes
Any tips or insight would be greatly appreciated!
- List item
Your code so far
/* file: index.html */
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Survey Form</title>
<link rel="stylesheet" href="styles.css" />
<div id="outside">
</head>
<body>
<h1 id="title">Bob's Photo Printing Survey Form</h1>
<p id="description">Thank you for taking the time to help us improve our business</p>
<form id="survey-form">
<div>
<label id="name-label">Name <input type="text" id="name" placeholder="Enter your name" required/> </label>
</div>
<div>
<label id="email-label"> Email <input type="email" id="email" placeholder="Enter your Email" required/></label>
</div>
<div>
<label id="number-label"> Age <input type="number" id="number" name="age" min="10" max="120" placeholder="age"></label>
</div>
<label>Which option best describes you?
<select id="dropdown">
<option value="">(select one)</option>
<option value="1">Full-time Photogrpaher</option>
<option value="2">Part-Time Photographer</option>
<option value="3">Hobby Photographer</option>
<option value="4">Prefer not to say</option>
<option value="5">Other</option>
</select>
<div>
<label> Would you recommend Bob's to a friend?</label></div>
<div>
<label> Definetly<input type="radio" name="rec" value="Defintely"></label>
</div>
<div>
<label>Maybe<input type="radio" name="rec" value="Maybe"></label>
</div>
<div>
<label> Not Sure <input type="radio" name="rec" value="Not Sure"></label>
</div>
<label>What is your favorite feature of Bob's?</label>
<select id="dropdown">
<option value="">(select one)</option>
<option value="1">Print Quality</option>
<option value="2">Promotional Deals</option>
<option value="3">Service</option>
<option value="4">Website</option>
</select>
<div>
<label> What would you like to see improved?</label></div>
<div>
<label> Website Interface<input type="checkbox" name="improved" value="Website Interface"></label>
</div>
<div>
<label> Print Quality<input type="checkbox" name="improved" value="Print Quality"></label>
</div>
<label> Customer Service<input type="checkbox" name="improved" value="Customer Service"></label>
<div>
<label> Shipping Time<input type="checkbox" name="improved" value="Shipping Time"></label>
</div>
<label>Any comment or suggestions?
<textarea name="comments" rows="3" cols="30" placeholder="Enter your comment here..."></textarea>
</label>
<div>
<input type="submit" id="submit" value="Submit"/>
</div>
</form>
</body>
/* file: styles.css */
body{
font-family: verdana;
text-align: center;
}
#outside{
background-color: #8B0000;
padding-top: 25px;
padding-bottom: 25px;
}
h1{
text-align: center;
color: #F0FFFF;
}
p{
font-style: italic;
text-align: center;
padding-bottom: 10px;
color: #F0FFFF;
}
form{
width: 70%;
margin: 0 auto;
text-align: left;
border: 1px solid #cCC;
padding: 1em;
background-color: white;
display: inline-block;
}
**Your browser information:**
User Agent is: Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_7) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/104.0.0.0 Safari/537.36
Challenge: Survey Form - Build a Survey Form
Link to the challenge:
