My survey form, responsiveness

Hi!
Here is my survey form, one the things I hated is forms and tables. Well after I struggled I completed my survey form (and I faced forms) and also try to make responsive by

  • using relative measures
  • using flexbox that changes its direction with media query from row to column.

Is it a good way to make responsive? Is there other alternatives? I still need to complete the part of CSS grids, so maybe that would give me new ideas. But for now, I wanted to know your feedback about this one.

2 Likes

It is a good way, you did pretty well. And yes, there are always different ways to achieve the same thing.

  1. Use align-items: center; on the .row class to better align the labels and inputs.

  2. I would give the elements inside the form some more vertical space between them. It is a little cramped right now, give them some bottom margin to space them out.

  3. I would move the max-width: 400px breakpoint up a bit, to say 580px and then also give the form full, or near full, width at that size (maybe 95% or 100%).

  4. You can also give the placeholder text some padding left.

input[placeholder] {
    padding-left: 10px;
}
  1. The gradient is a little off but it is because of the background repeat and the fact that the body is not taking up the full hight. The easiest solution would be to give it 90deg instead of 65deg. I would also remove the gradient from the h1
1 Like

Seems great!
You definitely should learn about CSS Grids, it’s not a different way to do Flexbox, they complement each other.

@lasjorg pointed out everything, I’d say that the most important is the media query. At 400px text is to squeeze and small, making it difficult to read

1 Like

Thanks! I used 400px because I did not know what would be a good breaking point. Later I will see how these tips improve the webpage.