Survey Form - Inline-Block Problem

Hello everyone, I am about to finish my second project Survey - Form.

It is not exactly what I was planning to design, but it is okay. I think it is almost finish except responsive design. Could you please help me about moving input boxes below questions when the page width reduces. I think i should use inline-block there but i couldn’t how to figure it out.

Thanks in advance for your responses,

Have a look at
the float
total width in the formarea
viewport

I think it looks pretty good even when resized.

If you did want to change the look though, you could do a media query and change the width of the items based on the screen size.
https://learn.freecodecamp.org/responsive-web-design/responsive-web-design-principles/create-a-media-query/

Another cool option is to use flex-box and flex-wrap and have it automatically adjust for you!
https://learn.freecodecamp.org/responsive-web-design/css-flexbox/use-the-flex-wrap-property-to-wrap-a-row-or-column/

Good luck!

1 Like

Thank you for your feedback guys. I played on element widths and i think it"s done.