I’m having trouble formatting the input areas in my survey form. Can anyone help me? I don’t know why the entry fields for name, address, and grade, and the comment field at the bottom are wider than the drop-down box widths. Any insights into what I did wrong?
New Student Survey form
I’d also really appreciate any other general feedback as well.
An easy way to fix these issues is to use
box-sizing: border-box on all of the inputs:
just as @bbsmooth had earlier suggested, use box-sizing: border-box for all your inputs. I did from my end, and it worked.
I also noticed that there’s a horizontal scrollbar appearing on your page, which implies that it is not mobile-responsive. try using relative units such as percentage in specifying your measurements where necessary. should you need any other help, I’m right here.
Thank you for the useful article @bbsmooth! I will probably just have to go back and start over in order to do the project the right way - just as I feared! But it is better to learn the fundamentals well and early on I suppose!
Thanks @tonymandated! Okay, I will go back and use the border-box value. For some reason, I’m feeling intimidated by the box model and I don’t know why! (Same with using media queries and relative units - there is just so much information!) Thank you for your offer to help - I am sure I will need it!!