Survey Form - Build a Survey Form

Tell us what’s happening:
Hi, I’m working on the project where I build a survey form and I’m stuck at the css level with my radio buttons. I would like them to be on the same lines as their labels but when I add a class to them and add some css that should potentially work (it was done this way in the previous task in the course) it doesn’t seem to work.
I also played around with adding some classes to other elements and it’s like no classes work in my code, I’m stuck and out of ideas :frowning: Does anyone have any?

   **Your code so far**
/* file: index.html */
<!DOCTYPE html>
<html>
 <head>
   <title>Survey Form</title>
   <link rel="stylesheet" href="styles.css">
 </head>
 <body>
   <h1 id="title">Ricoh Summer Event Survey</h1>
   <p id="description" class="inline">Tell us what you think about the recent event in Kociewska Zagroda!</p>
   <form id="survey-form">
     <fieldset>
       <label id="name-label">Which department are you from? <input required id="name" type="text" placeholder="e.g. Data Governance"></label>
       <label id="email-label">What's your e-mail address? <input required type="email" id="email" placeholder="e.g. sandra@ricoh-europe.com"></label>
       <label id="number-label">How old are you? <input id="number" type="number" min="18" max="65" placeholder="32"></label>
     </fieldset>
     <fieldset>
       <label>Overall, did you like the event?
         <select id="dropdown">
         <option value="1">Yes, it was great</option>
         <option value="2">It was ok</option> 
         <option value="3">Not so much</option> 
         <option value="4">It was terrible</option> 
         </select>
       </label>
       <label>What transport did you use?
         <input type="radio" name="transport" value="own" class="inline" />Own
       </label>
       <label>
       <input type="radio" name="transport" value="ricoh" class="inline"/>Company
       </label>
     </fieldset>
     <fieldset>
       <label>What did you like?</label>
       <label><input type="checkbox" value="food">Food</label>
       <label><input type="checkbox" value="hoodies">Hoodies</label>
       <label><input type="checkbox" value="activities">Activities</label>
       <label><input type="checkbox" value="drinks">Drinks</label>
       <label><input type="checkbox" value="venue">Venue</label>
       <label><input type="checkbox" value="other">Other</label>
       <label>Tell us what: <textarea id="other-likes" rows="3" cols="30">
         </textarea></label>
     </fieldset>
      <fieldset>
       <label>What didn't you like?</label>
       <label><input type="checkbox" value="food">Food</label>
       <label><input type="checkbox" value="hoodies">Hoodies</label>
       <label><input type="checkbox" value="activities">Activities</label>
       <label><input type="checkbox" value="drinks">Drinks</label>
       <label><input type="checkbox" value="venue">Venue</label>
       <label><input type="checkbox" value="other">Other</label>
       <label>Tell us what: <textarea id="other-likes" rows="3" cols="30">
         </textarea></label>
     </fieldset>
     
     <input type="submit" value="Submit" id="submit">
    
   </form>
 </body>
</html>
/* file: styles.css */
body {
 width: 100%;
 background:  rgba(192, 47, 47, 0.079);
 height: 100vh;
 margin: 10px;
 color: #423c3c;
 font-family: Tahoma, sans-serif;
}

h1, p {
 color: rgb(193, 58, 58);
 margin: 20px 10px;
 text-align: center;
}

form {
 width: 80vw;
 max-width: 500px;
	min-width: 300px;
 margin: 0 auto;
 padding-bottom: 1em;
 background: rgba(192, 47, 47, 0.079)
}

fieldset {
 border: none;
 padding: 2 rem 0;
}

label {
 display: block;
 margin: 0.5rem 0;
}

input,
textarea,
select {
 margin: 10px 0 0 0;
	width: 100%;
 min-height: 2em;

.inline {
 width: unset;
 margin: 0 0.5em 0 0;
 vertical-align: middle;
 }

   **Your browser information:**

User Agent is: Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_7) AppleWebKit/605.1.15 (KHTML, like Gecko) Version/15.3 Safari/605.1.15

Challenge: Survey Form - Build a Survey Form

Link to the challenge:

hi there,
while i am trying out, i discovered a missing curly brace.

textarea,
select {
 margin: 10px 0 0 0;
	width: 100%;
 min-height: 2em;

.inline {

Oh gosh, I feel so silly now. It feels like it’s always a missing comma or curly bracket… thanks a lot, it works now! :heart:

1 Like

and i guess , giving the input a width of 100% makes it impossible to get some text on the same line.

1 Like

A post was split to a new topic: Survey form question