RWD - Survey Form (CSS Part Help)

Hi Guys, Hope you are doing well. I completed the Survey Form and passes all the tests but it looks really ugly. So, could you guys help me improving it?
Here Is My Code:


<!DOCTYPE html>
<html lang="en">

  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initialscale=1.0">

  <title>Survey Form</title>

  <link rel="stylesheet" href="styles.css" type="text/css">

  <h1 id="title">freeCodeCamp Survey Form</h1>
  <p id="description">Thank you for taking the time to help us improve the platform.</p>
  <form id="survey-form">
    <label id="name-label">Name: <input id="name" type="text" placeholder="Enter your name" required></label>
    <label id="email-label">Email: <input id="email" type="email" placeholder="Enter your email"required></label>
    <label id="number-label">Age: <input id="number" type="number" min="12" max="120" placeholder="Enter your age" required></label>
          Which option currently describes your role?
        <select id="dropdown">
          <option disabled selected value>(Select an option)</option>
          <option>Prefer not to say</option>
            <p>Would you recommend freeCodeCamp to a friend?</p>
          <input type="radio" name="recommend" value="definitely" class="input-radio"></label>
          <input type="radio" name="recommend" value="maybe" class="input-radio">
          <input type="radio" name="recommend" value="not sure" class="input-radio">
          <p>What would you like to be improved? (Check all that apply)</p>
            <input type="checkbox" value="Curriculum">
            <input type="checkbox" value="Forum">
              City meetups
              <input type="checkbox" value="City meetups">
              <input type="checkbox" value="Videos">
    <button type="submit" id="submit">Submit</button>


@import url('');

body {
  margin: 30px auto;
  font-family: 'Ubuntu', sans-serif;
  background-image: linear-gradient(180deg, rgb(5, 101, 156), rgb(3, 172, 172), cyan);
  color: white;
  text-align: center;


Is there something in specific you want to change?

Yes @t.axel.anderson , see the positions of those elements it looks messy. I want align them properly in an order.

You can use the <br> tag to create a line break so the elements are positioned vertically above each other. There is no closing tag, you just have to place the tag where you want the current line to end.

1 Like

Ok thanks I’ll try it.

Wow this is starting to work. @t.axel.anderson . It is looking better now.

It is looking better now. From here I’ll do it on my own. Thanks @t.axel.anderson.

This topic was automatically closed 182 days after the last reply. New replies are no longer allowed.