Hey all,
Very new to freecodecamp and the forum. Really enjoy working with HTML and CSS, though it’s challenging at this point.
I’m working on the projects for the HTML / CSS certification. I’m specifically having trouble with the Survey Form. No matter what I do, I can’t get the radio button to line up with the text “Beginner.” Here is a print screen of the specific code and my form:
Any recommendations / what am I doing wrong?
Thanks!
Please post the link to your Codepen so we can see the code.
Also, just in general, when asking for help with code you should always post the code and not images.
When you enter a code block into a forum post, please precede it with a separate line of three backticks and follow it with a separate line of three backticks to make it easier to read.
You can also use the “preformatted text” tool in the editor (</>) to add backticks around text.
See this post to find the backtick on your keyboard.
Note: Backticks (`) are not single quotes (’).
Sorry about that - hopefully this link works:
Also, apologies in advance for the code formatting. I’m sure it’s confusing to you guys. Trying to get better at it.
your css tag selector input is effecting .input-radio
input{width: 88%;
margin: 10px -15px;
padding: 8px 30px;
font-family: arial;
position: relative;
top: -60px;
font-size: 15px
}
give your other inputs a class or use pseudo-classes
adding pseudo-classes or other inputs class won’t align it next to each other. but at least you know what frustrated you, and you can fix it. gl ☜(ﾟヮﾟ☜)
Don’t use positioning it isn’t needed and will just make the design brittle and much harder to make responsive.
As said, you have targeted all input elements and given them all the same width, that is not going to work (the radio input is the same width as the text inputs).
Instead of me trying to help you fix this one specific issue I would suggest you take some time and learn more about doing layouts.
I’m sure it will pay off and help you not only build this project but the rest as well and when moving forward to new projects. I know it will be a detour but I think it’s worth it.
You can also give the example form code a look at some point to see how it is done there, see if you can learn from it (don’t copy it, just see what you can glean from it).
Thanks for the tips. I’ve removed positioning which immediately helped my layout. I’m now getting stuck in trying to style with “class.” I would like to further style my inputs and radios. I’ve made my class for the bio inputs as “input-blanks,” and for the radios “input-radios.” When I try to style these classes in CSS, I’m not getting any changes whatsoever.
Examples:
-I’d like to try and change font style in my radio
-I’d like to make the radio’s closer together vertically
-I’d like to make my blank input boxes wider and a bit taller.
Also, I’ll be going through that layout video but don’t know when I’m going to get 4 hours in the near future.
Thanks!
The selector input.blanks is saying select all input elements with the class .blanks.
You would use it like this in the HTML and it would have to be on an input element.
<input class="blanks">
If the selector was .input.blanks it would be used like this in the HTML (on any element type).
<div class="input blanks">
You don’t have to watch it all in one sitting. There might also be parts you can skip or fast forward through if you know about it already.
In any case, you will definitely need to set aside more than 4 hours to learn CSS. So just take it a little at a time.
This topic was automatically closed 182 days after the last reply. New replies are no longer allowed.