Build a Survey Form - Drop down and radio text alignment

HTML-CSS
#1

Hello! Having trouble with couple of things on my challenge:

  1. Drop down width. i am unable to make the width/height of drop down similar to other input boxes ----- this is only an issue on Safari not Chrome

  2. Radio and checkbox text alignment. I have tried a bunch of things to get ‘radiobutton’:text in a single line but it always come out to radio button followed by a line break and then the text.

Can anyone please guide me? Link to my pen - https://codepen.io/adigee515/pen/OJxdwQG

#2

radiosandboxes
radiosandboxes948×721 46 KB

EDIT: Let us not add <br>. I just learned it’s bad practice to do that haha lol
First, you can try adding <br> to your texts:
Definitely<br>...
Maybe<br>
Wiki<br>

Next, you can wrap sections with a <div> element.
This is what I did too for your project then some minor adjustments like the width, height, and display.

You can use this for reference

HTML


<div id="radios">
    <label for="definitely"><input id="definitely" type="radio" name="rec" value="definitely"> Definitely<br> </label>

    <label for="maybe">
      <input id="maybe" type="radio" name="rec" value="maybe"> Maybe<br>
    </label>

    <label for="not sure">
      <input id="not sure" type="radio" name="rec" value="not sure"> Not sure<br>
    </label>
    </div>

CSS

#radios {
  width: auto;
  height: auto;
}

#checkbox_div {
/*   display: inline-block; */
  width: auto;
  height: auto;
  text-align: start;
  
}

All the best!

#3

Do not use the <br> element to force line breaks or spacing. That’s what CSS is for.
Reference MDN Docs

#4

Thank you! This is what I get

Screen Shot 2022-01-15 at 11.29.26 PM
Screen Shot 2022-01-15 at 11.29.26 PM704×785 44.5 KB 

        Would you recommend freeCodeCamp to a friend?  
 <div id="radios">
    <label for="definitely"><input id="definitely" type="radio" name="rec" value="definitely"> Definitely<br> </label>

    <label for="maybe">
      <input id="maybe" type="radio" name="rec" value="maybe"> Maybe<br>
    </label>

    <label for="not sure">
      <input id="not sure" type="radio" name="rec" value="not sure"> Not sure<br>
    </label>
    </div>
#5

oh, thank you for teaching us this!

#6

I am just not sure what the difference is! It is literally the same code :frowning:

#7

how about in the css?

#8 
#radios {
  width: auto;
  height: auto;
  text-align: start;
}
#9

that’s good. I saw the problem:

input {
    width: 100%;
    padding: 12px 15px;
    margin: 8px 0;
    box-sizing: border-box;
}

try commenting this out on your CSS

asdasdasdas
asdasdasdas1664×253 23.9 KB

#10

If I comment this out, then the input boxes shrink. I am surprised it is not happening on your end?

Screen Shot 2022-01-15 at 11.45.45 PM
Screen Shot 2022-01-15 at 11.45.45 PM795×620 59.5 KB

#11

We can try adding a new div for the checkboxes then style that new div separately with CSS?

#12

Actually, I commented that out and added the following which made it work

input[type=text] {
    width: 100%;
    padding: 12px 15px;
    margin: 8px 0;
    box-sizing: border-box;
}

input[type=email] {
    width: 100%;
    padding: 12px 15px;
    margin: 8px 0;
    box-sizing: border-box;
}

input[type=number] {
    width: 100%;
    padding: 12px 15px;
    margin: 8px 0;
    box-sizing: border-box;
}
#13

thank you!!! I have been struggling for last 9 hours lol

#14

Haha yey!!! Glad to be able to help!!!