Hello campers!
I need a bit of help figuring out how to align radio elements properly. Currently, if one radio element has more text than the other, it with shift to the left more than the other radio element. How would I prevent this? Thanks!
1 Like
can you share your code or best yet if you could fire up a small project with your attempted code in codepen/repl/etc
happy coding 
1 Like
Hi @chetanzeogu410 !
In the future, when asking for help for outside projects it is best to do the following:
- Post your code
- Post a working version of the project. You can do like through codepen, codesandbox, github pages, etc.
- Post a screenshot of what the expected behavior should be if you are asking about a visual issue.
The reason why this is important is due to the following:
- Including an image with your post would have probably increased the number of people responding to your post. That way people will understand what you are trying to do.
- Including a live version of your project will help people jump straight to the issue and see it for themselves. Then people can jump into the code and see how to fix it. By just providing the code, most people won’t want to pull down the project and run it locally like I did. Even though that is not hard to do, people are busy and are mostly volunteering their time. So you want to make things super quick for people to help you
Now to your issue.
I assuming you are after something like this?
If so, there are a few ways to do this but flexbox came to mind for me
I would remove all br elements and include labels for these inputs.
I chose to do implicit label and input association but you can do explicit too
Then it looks like you have a parent container called quiz-questions.
So you can use flex on that and center it.
Then you can wrap the labels and inputs inside of a div container and use flex on that too. then to align the radio buttons you can set align-items to start.
I would suggest googling the following phrase which has tons of results on what you are trying to do
- how to align radio buttons flexbox
Since we are here, I did find a few issues that you should be aware to resolve for this project as well as future projects. So you can think of this as a mini code review of sorts
First issue I noticed was inconsistent formatting. This doesn’t matter as much when you are working solo. But once you start working with others on real world projects, you will need to work with a formatter like Prettier so your code is consistent with the project
Second thing, I noticed were the multiple h1 elements. It is best practice to use one h1 per HTML document.
Third thing I noticed was that you had a couple instances of inline styles like this
<div class="quiz-start" style="display: none">
When working with vanilla html and css projects it is best to keep all of your styles in a separate css file.
Another issue in the HTML were the use of br elements and lack of label elements. It is best to include label elements and associate them with the correct inputs. as for the br elements, it looks like you are mainly using them for styling purpose so the inputs were on a new line. There are ways in css to do this, so I would suggest ditching the br elements
lastly, you do have some repetition in your JS code like this here
document
.querySelector(".submit-btn-one")
.addEventListener("click", () => {
if (document.querySelectorAll('input[name="birth"]')[3].checked) {
score++;
}
document.querySelector(".question-one").style.display = "none";
document.querySelector(".question-two").style.display = "block";
});
It looks like you are planning on having this quiz be 15 questions which would mean copying that logic 15 times. So I know this is still a work in progress, but I would suggest playing around with this a bit to see how you can cut down on the repetition.
Hope that helps and happing coding
Yeah, those were for testing, thank you for the advice, will do in the future!