Unable to vertically align radio buttons and label (survey form challenge)

So I’m having trouble attempting to put all my radio buttons in a vertical manner along with my label. I looked at other forum posts and attempting things like “vertical-align: top;” and align-items: center; and I seem to have no dice. I know that I can’t use display: block along with the previous code but if I don’t use display: block then I won’t be able to add padding and spacing between other elements. They only want to stay aligned horizontally. Any help?

My HTML code:

<!DOCTYPE html>

<html>
    <head>
        <title>OS survey</title>
        <link rel="stylesheet" href="surveystyle.css">
    </head>
    <div id="script">
        <script src="https://cdn.freecodecamp.org/testable-projects-fcc/v1/bundle.js"></script>
    </div>
    <main id="main">
        <div class="title-section">
            <h1 id="title">macOS vs. Windows</h1>
            <p id="description">Thank you for helping us decide which platform to focus on. In addition, we will be using your feedback to further develop our mobile software.</p>
        </div>
        <div id="surveyform">
            <form id="survey-form">
                <label id="name-label">Name</label>
                <input id="name" class="input-text" type="text" placeholder="Name*" required/>
                <label id="email-label">E-Mail</label>
                <input id="email" class="input-text" type="email" placeholder="E-Mail Address*" required/>
                <label id="number-label">Age</label>
                <input id="number" class="input-text" type="number" min="13" max="100" placeholder="Enter your age here" required/>
                <p>What is your level of employment?</p>
                <select id="dropdown" name="role" required>
                    <option disabled selected>Select your employment level</option>
                    <option disabled></option>
                    <option>Full-Time Job</option>
                    <option disabled></option>
                    <option>Part-Time Job</option>
                    <option disabled></option>
                    <option>Unemployed</option>
                    <option disabled></option>
                    <option>Student</option>
                    <option disabled></option>
                    <option>Prefer not to say</option>
                    <option disabled></option>
                    <option>Other</option>
                </select>
                <label id="radio-label">Do you prefer using a mobile or desktop device?
                    <input id="actual-radio" name="use-preference" value="mobile" type="radio">Mobile
                    <input id="actual-radio" name="use-preference" value="desktop" type="radio">Desktop
                </label>
                
            </form>
        </div>
    </main>
</html>

and my CSS:

@import url('https://fonts.googleapis.com/css2?family=Roboto:wght@300&display=swap');
*{
    font-family: 'Roboto', sans-serif;
}
.title-section{
    text-align: center;
    color: white;
    margin-top: 3em;
}
#description{
    padding: 0 10px 0 10px;
    max-width: 500px;
    margin: 0 auto 0 auto;  
}
html{
    height: 100%;
}
body{
    background: linear-gradient(135deg, purple, pink);
    max-height: 100%;
}
#survey-form .input-text{
    display: block;
    justify-content: center;
}
#survey-form{
    background-color: #fff;
    box-shadow: 0px 0px 10px rgba(0,0,0,0.2);
    padding-top: 10px;
    padding-bottom: 35px;
    padding-left: 2em;
    padding-right: 2.5em;
    max-width: 800px;
    margin: 50px auto 0 auto;
    border-radius: 5px;
    padding-top: 30px;
}
.input-text{
    width: 100%;
    padding-top: 10px;
    padding-bottom: 10px;
    margin-left: 1em;
    margin-right: 1em;
    font-size: 15px;
    border: hidden;
    border-bottom: 2px solid;
    margin: 10px auto 30px auto;
    outline: none;
}
.input-text:focus{
    transition: all 0.3s ease;
    border-bottom: 2px solid purple;
}
#dropdown{
    width: 100%;
    padding-top: 10px;
    padding-bottom: 10px;
    font-family: 'roboto', sans-serif;
    font-weight: 400;
    font-size: 15px;
    line-height: inherit;
    border-bottom: 2px solid black;
    border-left: hidden;
    border-right:hidden;
    border-top: hidden;
    outline: hidden;
    color: grey;
}
#dropdown:focus{
    outline: none;
    border-bottom: 2px solid purple;
    transition: all 0.3s ease;
}
#radio-label{
    display: block;
    width: 100%;
    padding-top: 20px;
    font-size: 15px;
}

Hey @cloud1!
If you have your code in Codepen, Please give the link?
It would be helpful

No problem, ill go ahead and throw it in for you right now!

Link: Test (codepen.io)

1 Like

@cloud1 you can try to put <br> after each radio label . This will put the following radio buttons in a new line. :slight_smile:

Hey @amalthomas!

Please see the above post

Hi @cloud1!

Are you interested in something like this?

#radio-label{
  display:flex;
  flex-direction:column;
  margin-top:10px;
}

Also be careful about using the same ids twice. ID’s need to be unique.

id="actual-radio"
1 Like

Hi @jwilkins.oboe ! Although that is great and perfect progress, I was wondering if it could be more like if the radio button was right NEXT to the label.

e.g (◯ Mobile)

Maybe revisit the lessons on creating radio buttons / checkboxes and paying attention the nesting portion.

1 Like

I don’t know if this is what you wanted.

Yes! Just like that, although I’d prefer if the radios were under the label. No worries though, I’m not trying to have you do the project for me at this point haha. I’m gonna go ahead and review the lessons on creating radios and nesting like @Roma stated above in this forum post

1 Like

You should attempt using the flex property as @jwilkins.oboe said. Also, I think it is a better practice to have an individual label for each radio option. That could lead to better semantic and JS usage

Hey @thonyarrieche77!
Welcome to the Forum!