Survey Form-Styling

HTML-CSS
1

Hi Guys,

Hope all is well.

I am struggling with styling my survey form in styles.css. I specifically have a problem with the labeling, checkboxes and radio buttons. Its all over the place. Can someone please guide me as to how to

3

Hi

Please can you post all your code in the forum. You can put 3 backticks before and after your blocks of code to format it. Please can you also describe which parts you are having a problem with, and what you want the styling to look like.

4

body {
width: 100%;
height: 100vh;
margin: 5px;
background-color:#ffffff;
color:#FF7728;
font-family:Dancing Script;
font-size:20px;
background-image:url(https://media.istockphoto.com/photos/empty-orange-color-shopping-bag-on-the-yellow-background-copy-space-picture-id1178685067?k=6&m=1178685067&s=612x612&w=0&h=vFh6JIw2ExgmMSndLmCYfSKPeqrf8rbF-IzO7Ixbalc=);
background-size:cover;

dancing-script {
font-family: “Dancing Script”, serif;
font-optical-sizing: auto;
font-weight: 700px;
font-style: normal;
}

.container {
background-color:#FFEFBF;
padding:5px;
margin: auto;
border-radius:15px;
max-width:600px;

}

h1 {
margin:1em auto;
text-align:center;
color:#FF7728;
}

p {
color:#000000;
margin: 0;
padding:5px;
text-align:center;
font-family:arial;

}

.sell, .shop{
text-align:left;
}

form {
width: 60vw;
max-width: 500px;
min-width: 300px;
margin: 0 auto;
padding-bottom: 2em;
position:relative;

label {
display: block;
line-height:32 px;
color:#000000;
font-family: Arial;

}

input[type=“checkbox”] {
position: relative;
display: inline block;
width: 20px;
height: 25px;
border: 1px solid #808080;
background: #FFFFFF;
margin: 2px;

}

input[type=“radio”] {
position: relative;
display:inline block;
width: 20;
height: 25px;
border: 1px solid #808080;
content: “”;
background: #FFFFFF;
margin: 2px;

}

input,textarea,
select {
margin: 5px 0 0 0;
width: 100%;
min-height: 2em;
padding:10px;
display: inline block;
position:relative;
font-family:Arial;
font-size:15px;
}

textarea {
background-color: #ffffff;
border: 1px solid #000000;
color: #000000;
text-align:center;

}

input[type=“submit”] {
display: block;
width: 60%;
margin: 1em auto;
height: 2em;
font-family:Arial;
font-size: 1.1rem;
background-color: #FFFFFF;
border-color: white;
min-width: 300px;
text-align:center;
color:#000000;

This is my styles.css code but I just cannot seem to place the labeling above the input field area and align the radio and checkboxes next to the option. Any help would be appreciated please.

5

Hi there!

You need to post your HTML file too. And as said in above post, add three back ticks (```) on a separate line before and after your code here.