Survey Form Padding Problem

1

Hello campers, I am working on the “Build a Survey Form” project. I already built my own project that passed all tests, but I wanted to do it again to learn some of the CSS from the example given. I’ve coded this one very similarly to the example, but I’m having a problem with the <form> right side padding at all the <input> fields and the <textarea> field. The drop down <selector> appears as I would expect, but the text, email and number <input> (which are all styled under the same class of “form-control”) and <textarea> fields extend into right side of the form’s padding further than it should. Also, if you reduce the window size, you’ll notice that the text for the checkbox labels invades, as well. I can set the padding-right to a higher number to sort of cheat it, but then the <textarea> is still a little too wide, and the <select> is too narrow. I’m assuming it’s something really simple that I’m overlooking… but I’ve looked over and over and over and over…

Here is a link to the project on Codepen:

https://codepen.io/KippMinton/pen/YzXvNKR

Can anyone spot what I’ve done wrong? Any additional advice/critiques are more than welcome, too. Also, this is my first forum post, so please, let me know of any etiquette/formatting errors on my part.

2

Welcome to the community,

You set the input width to 100% of the viewport. Why don’t you assign something like 75% width and margin property of margin: 0 auto;

3

Hi passive, thank you for responding! Sorry, to take so long to reply. Had a little bit of an emergency after posting. That does help with the <input> and <textarea> fields, but then it shrinks the <select> menu to be a little smaller. I guess I’m just trying to figure out why the <select> responds the way I expect but the others don’t. The example project doesn’t seem to have that problem despite using the same stylings for them.

1 Like
4

I checked it out once again, the select menu looks good and doesn’t shrink at all.

5

Maybe it’s a browser difference? Still no clue, but in Firefox and Chrome on Windows and iOS the select is definitely smaller than the other inputs. Inspecting with Firefox’s dev tools even shows that the input fields extend outside of their divs whereas the select sits a little within it. I’m about ready to move on, though. I’ll keep learning, and maybe I’ll eventually have an “AHA!!” moment, haha! Anyway, thanks so much for your suggestions!

1 Like
6

You’re welcome friend.

7

AHA!!! They weren’t inheriting the box-sizing: border-box;, which was causing the padding of the <input> to extend out!!

8

I was having the exact same issue! It was passable of course, but super annoying if you want things to be symmetric in all browser sizes. Thanks for posting your discovery! :grinning:

1 Like
9

Sometimes, I’m perfectionistic to an almost debilitating/OCD level, but I hope that’s a strength when it comes to becoming a developer. Glad it helped someone else this time, haha!