Guitar G.A.S. Survey! Any Feedback?

Any feedback welcome, thanks!

Its good, very well made. the colors are great, your inputs look good too. i really like your form-element class it looks very unique. The page is pretty responsive but when your screen width is less than 992 it looks a little weird, i would suggest changing the form-body width to 95% instead of 100%

@SALTx I made the change you suggested and it looks better now, thank you greatly!

Not bad, I like it. Here are some ideas.

  1. I would set the body font size to something like 18px.

  2. I would disable the default outline on focus.

.form-input > input, textarea {
  outline: none;
}

You can make your own focus styles, here are some examples.

.form-input > input:focus {
  background: #dbdba2;
  transition: background .5s ease;
}

.form-input > input:focus::placeholder {
  color: brown;
  transition: color .5s ease;
}
  1. I think i would drop the border on button hover, maybe use a box-shadow.
button:hover {
  background-color: brown;
  color: beige;
/*   border: 3px solid beige; */
  box-shadow: 2px 2px 4px rgba(0, 0, 0, 0.49);
}

You can also add an active style to make the button move down a bit when you click it.

button:active {
  transform: translateY(2px);
}
  1. I would make a second media query so the form doesn’t go as wide so fast. Also, remove the padding when it is 100%.
@media screen and (max-width: 992px) {
  .form-body {
    width: 70%;
  }
}

@media screen and (max-width: 680px) {
  .form-body {
    width: 100%; /* or 95% if you like that */
    padding: 0;
  }
}

@lasjorg thank you for the feedback