Hi, I am working on my form and need some help I am trying to style my radio buttons so they are not inline. Instead, I would like them one after another thanks!
Why don’t you give it a display attribute with the value of block so that it takes the whole line?
1 Like
@starstruck I think you are possibly the most helpful person on these forums.
1 Like
thanks how would this look I have tried everything and i cant seem to get it to work.
1 Like
Can you post your code by pasting it between the ““ marks that appear when clicking the </> button:
2 Likes
Body {
width:100%;
background-color:black;
color:white;
font-family:Arial;
font-size:17px;
background-image:url(https://media.licdn.com/dms/image/C4D12AQE5TOI_KWrCjQ/article-cover_image-shrink_720_1280/0/1639031336020?e=2147483647&v=beta&t=MQ1jjcua-AkIP5nfXuMd4chC7XgW1OLI3sqce8DSy9k);
background-repeat: no-repeat;
background-size:cover;
}
h1,p {
margin: 1em auto;
text-align:center;
}
fieldset {
border: none;
padding: 4rem 0;
}
form{
max-width: 500px;
min-width: 300px;
margin: 0 auto;
padding-bottom: 2em;
}
input[type="text"],input[type="email"],input[type="number"],
#dropdown{
display:block;
}
textarea {
display: block;
font-family: arial;
width: 100%;
border: 2px
border-radius: 3px;
margin-top: 10px;
background-color:#e6e6e6;
}
input[type="submit"]{
display:block;
width:40%;
margin: 1em auto;
height: 2em;
font-size:1rem;
background-color: #e6e6e6;
border-color:#cce6ff;
}
\
Where is the styling for your radio buttons.
Which selector?
Can you show me the html element of your radio button.
Thanx!
1 Like
i just trying to get my radio buttons on the left and text on the right and the next option underneath
Can you post your HTML too please?
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8">
<link rel="stylesheet" href="https://forum.freecodecamp.org/t/when-making-a-form-i-dont-know-how-to-align-radio-buttons/styles.css">
<title>Videogame Form</title>
</head>
<body>
<h1 id="title">Videogame Survey</h1>
<p id="description">Make gaming better by filling out this form</p>
<form id="survey-form">
<fieldset>
<label for="name">Name<input id="name-label" name="name" type="text" placeholder="Name" required></label>
<label for="email">Email<input id="email-label" name="email" type="email" placeholder="Email" required></label>
<label for="number">Age<input id="number-label" name="number" type="number" min="13 max="99" placeholder="Age" required></label>
</fieldset>
<fieldset>
<label for="game genre">Favorite game genre?</label>
<select id="dropdown" name="game" required>
<option value="">(select genre)</option>
<option value="1">FPS</option>
<option value="2">RPG</option>
<option value="3">Fighting</option>
<option value="4">Survival Horror</option>
<option value="5">All</option>
</select>
</fieldset>
<fieldset>
<legened>Preferred Platforms</legened>
<lable for="Preferred-Platforms"><input id="Xbox" type="checkbox" name="Preferred- Platform" checked>Xbox</label>
<lable for="Preferred-Platforms"><input id="Nintendo" type="checkbox" name="Preferred-Platforms">Nintendo</label>
<lable for="Preferred-Platforms"><input id="Playstation" type="checkbox" name="Preferred-Platforms">Playstation</label>
<lable for="Preferred-Platforms"><input id="PC" type="checkbox" name="Preferred-Platforms">PC</label>
</fieldset>
<fieldset>
<legened>Where do you play?</legened>
<lable for="Where do you play?"><input
id="Location" type="radio" name="Location" checked>Home</label>
<lable for="Location"><input id="Location" type="radio" name="Location" checked>Work</label>
<lable for="Location"><input id="Location" type="radio" name="Location" checked>On the go</label>
<lable for="Location"><input id="Location" type="radio" name="Location" checked>Kitchen</label>
</fieldset>
<fieldset>
<legened>How Long do you play?</legened>
<lable for="Play-Time"><input id="hr" type="radio" name="hr" checked>Less than 1hr</label>
<lable for="hr"><input id="hr" type="radio" name="hr">2hr</label>
<lable for="hr"><input id="hr" type="radio" name="hr">4hr</label>
<lable for="hr"><input id="hr" type="radio" name="hr">5hr</label>
<lable for="hr"><input id="hr" type="radio" name="hr">8+ hr</label>
</fieldset>
<fieldset>
<label for="game-bio">How did you discover videogames?<textarea id="game-bio" name="game-bio" rows="4" col="40" placeholder="First game I played was..."></textarea>
</Fieldset>
<input type="submit" value="Submit" />
</form>
</body>
</html>
Hmmm. Well, I was hoping you had the text before the input element, but given that you have it after, that should have the text after the button too. Let me keep looking to see if I can see anything else.
2 Likes
thanks! That moved the text but I just need my options not to be inline
Btw I spotted a few typos with the tags.
1 Like
lol thanks didn’t see that
2 Likes
How about input[type=“radio”]. Just a guess, might not work…
1 Like
Also you have used multiple id’s more than once. An Id has to be unique on a page. Still not solving your problem, but thought I’d point it out.
2 Likes
Give your radio buttons a display attribute of inline-block and a width attribute as well.
That should solve it.
2 Likes