Need help with my survey form

Hey guys!
Could someone explain why my inputs and my textarea isnt ‘‘centered’’ as the submit button?
both are at 100% width…

https://codepen.io/shankly1892/pen/oNXOPaB

thanks alot!
(sorry about the messy code, still learning and the project is not done)

Best regards, Simon

The text area is not aligned to the rest of the elements because it is resizable by default
Add the following code to the respective components if you want all of them to be aligned

#name,
#email,
#number {
  
  border: none;   /* Add this */
  
}

textarea {
  resize: none;    /* Add this */
}

Hey nibble!

thanks for taking the time ,
unfortunately the codes that you wrote didn’t help.
Also the resize:none; was already existing in the textboxarea

Best regards, Simon

1 Like

Hi @therainmaker, i notice your code has changed a lot from yesterday’s
Copy and paste the css below. It aligns the elements, if you use the developer tools in your browser to check. They are not aligned in your current code because i have noticed you are applying padding to some elements while others are not padded. It is also bad practice to apply fixed width to elements. Instead use relative units like rem, em, vh, vw, %.

body {
  font-family: "Space Mono", monospace;
  @font-face: url(<linkhref="https://fonts.googleapis.com/css?family=Space+Mono&display=swap"rel="stylesheet">);
  background-image: url(https://previews.123rf.com/images/peshkov/peshkov1905/peshkov190500374/128578729-abstract-glowing-circuit-coding-background-programming-and-technology-concept-3d-rendering.jpg);
  background-color: #000066;
  background-repeat: no-repeat;
  background-position: center;
  color: white;
  text-shadow: 1px 1px blue;
}
.header {
  text-align: center;
  padding-bottom: 1rem;
}

form {
  display: block;
  width: 400px;
  max-width: 100%;
  margin: 0 auto;
  text-align: left;
  padding: 10px;
  border-radius: 5px;
  border: solid;
  box-sizing: border-box;
}

label {
  padding: 5px 0 5px 0;
}

.radio-group,
.checkbox-group {
  padding: 5px 0 5px 0;
}

#name-label,
#email-label,
#number-label,
#dropdown-label {
  display: block;
  width: 100%;
}

#name,
#email,
#number {
  display: block;
  width: 100%;
  font-family: "Space Mono", monosp;
  border: none;
  border-radius: 2px;
}

select,
#radio-input1,
#radio-input2,
#radio-input3,
#checkbox1,
#checkbox2,
#checkbox3 {
  cursor: pointer;
  font-family: "Space Mono", monospace;
}

textarea {
  resize: none;
  display: block;
  width: 100%;
  border: none;
  padding: 5px 0 5px 0;
  font-family: "Space Mono", monospace;
  border-radius: 5px;
}

.textarea-group {
   width: 100%
}

#submit {
  box-shadow: inset 0px -3px 7px 0px #29bbff;
  background: linear-gradient(to bottom, #2dabf9 5%, #122230 100%);
  background-color: #2dabf9;
  border-radius: 3px;
  border: 1px solid #0b0e07;
  cursor: pointer;
  color: #ffffff;
  font-family: "Space Mono", monospace;
  font-size: 15px;
  text-decoration: none;
  text-shadow: 0px 1px 0px #263666;
  width: 100%;
}
#submit:hover {
  background: linear-gradient(to bottom, #122230 5%, #2dabf9 100%);
  background-color: #122230;
}

footer {
  text-align: right;
}

1 Like

Hey!

Ok, i will look into it!
Also thanks for the feedback, ive been lazy with the use of fixed width and i will take your advise with me !

Thanks!
best regards, Simon

1 Like