Build a Job Application Form - Radio Group Issue

HTML-CSS
1

Tell us what’s happening:

Hi! My code passes all the tests, but my radio group is ugly. I can’t seem to work out how to get the checkboxes and labels on the same line. Any ideas what I’m doing wrong? Thanks :slight_smile:

Your code so far

<!-- file: index.html -->
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="styles.css">
    <title>Job Application Form</title>
</head>
<body>
  <div class="container">
    <h1>Job Application Form</h1>
    <form>
      <label for="name">Full name:</label>
      <input type="text" name="name" id="name" placeholder="Enter your name" size="40">
      <label for="email">Email address:</label>
      <input type="email" id="email" placeholder="Enter your email" size="40">
      <label for="position">Position:</label>
      <select name="position" id="position">
        <option value="select">Select a position</option>
        <option value="designer">Web designer</option>
        <option value="developer">Web developer</option>
        <option value="manager">Manager</option>
      </select><br>
      <fieldset class="radio-group">
        <legend>Availability</legend>
        <input type="radio" name="availability" id="full-time" value="Full-Time">
        <label for="full-time">Full-Time</label>
        <input type="radio" name="availability" id="part-time" value="Part-Time">
        <label for="part-time">Part-Time</label>
      </fieldset>
      <label for="message">Why do you want this job?</label><br>
      <textarea id="message" name="message" rows="8" cols="79" placeholder="Write your answer"></textarea>
      <button type="submit" value="Submit">Submit</button>
    </form>
  </div>
</body>
</html>

/* file: styles.css */
body {
  font-family: Verdana, sans-serif;
}

.container {
  display: block;
  margin: 20px auto;
  max-width: 600px;
  padding: 50px;
  border-radius: 10px;
  box-shadow: 0 0 10px #8b939c;
}

h1 {
  text-align: center;
}

label {
  display: block;
  padding: 5px 0px;
  margin: 5px 0px;
}

input, select, textarea {
  width: 100%;
  padding: 5px;
  border-radius: 5px;
  box-sizing: border-box;
}

.radio-group {
  width: 100%;
  box-sizing: border-box;
  margin: 10px 0;
}

button {
  display: block;
  padding: 10px 15px;
  margin: 10px auto;
  color: white;
  font-weight: bold;
  background-color: #3f88c5;
  border: 1px solid #032b43;
  border-radius: 5px;
}

input:focus, textarea:focus {
  border: 2px solid #3f88c5;
}

input:invalid, select:invalid, textarea:invalid {
  border: 2px solid red;
}

input:valid, select:valid, textarea:valid {
  border: 2px solid green;
}

button:hover {
  background-color: #ffba08;
}

.radio-group input[type="radio"]:checked {
  border-color: #032b43;
  background-color: #3f88c5;
  box-shadow: 0 0 5px #8b939c;
  color: #3f88c5;
}

.radio-group input[type="radio"]:checked + label {
  color: #3f88c5;
}

input:nth-child(1) {
  border-radius: 5px;
}

Your browser information:

User Agent is: Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/133.0.0.0 Safari/537.36

Challenge Information:

Build a Job Application Form - Build a Job Application Form

2

Hello~
When this happens, it’s likely due to block display properties.

Three elements affected by the class “radio-group”.
Within CSS, there are two likely suspects.

label {}
input, select, textarea {}

All labels have been given a block property.
The radio button is an input element that had been given 100% width.

soryaek’s suggestion works too! It will be taught in CSS Flexbox two lessons after. (There are ways to overwrite a parent style in a later lesson as well) For flexbox, I recommend looking up a supplementary guide while doing fcc. (MDN flexbox)

I’m currently on CSS and found that adding background-color:aqua (any color) to every css selector steps helps with visual feedback that many lessons lack. For example, what happens when width is added, how div elements are arranged on a page.

1 Like
3

@willowharriet

You can treat all elements in .radio-group as flex items.

Try below instead of your current style:

2 Likes
4

That’s brilliant. Thank you!

5

Awesome. Thank you very much for the information :+1: