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;
}