Survey Form - Build a Survey Form

Tell us what’s happening:
Can’t seem to figure out a way to get my radio and checkbox buttons to be in line with text.

I’ve listed the code I have for the radio buttons and checkbox, some screenshots of the result and the CSS styles sheet. Any help is appreciated!


<input id="yes" type="radio" name="yes-no" value="yes"><label for="yes">Yes</label>

<input id="no" type="radio" name="yes-no" value="no"><label for="no">No</label>

Screenshot 2022-12-05 at 11.59.49 AM


<input type="checkbox" name="email" value="email">Email
<input type="checkbox" name="text" value="text">Text
<input type="checkbox" name="no" value="no">No thank you
**css style sheet**

/* file: styles.css */
body {
width: 100%;
height: 100vh;
margin: 0;
background-color: #948C7C;
color: #F0EFEE;
font-family: Playfair;
font-size: 16px;

h1, p{
  margin: auto;
  text-align: center;

  width: 60vw;
  max-width: 500px;
  min-width: 300px;
  margin: 0 auto;
  padding-bottom: 2em;
  align: center;

fieldset {
  border: none;
  padding: 0.5rem 0;
  margins: 0 auto;

display: block;
margin: 0.5rem 0;
vertical-align: middle;

input, select{
  width: 100%;
  max-height: auto;

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/16.1 Safari/605.1.15

Challenge: Survey Form - Build a Survey Form

Link to the challenge:

Change the position of the opening tag of the ‘label’ elements:

<label for="yes"><input id="yes" type="radio" name="yes-no" value="yes">Yes</label>

<label for="no"><input id="no" type="radio" name="yes-no" value="no">No</label>

Then, change the CSS code by deleting the following:

input, select{
  width: 100%;
  max-height: auto;

Do the same with ‘input’ elements that have the type attribute set to the ‘checkbox’ value.

That did the trick! Thank you! For future reference, what’s the reason to delete the CSS code?

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