Hi! I am trying to solve the Survey form project. But i have problem with the input. When i apply padding to it it just kill everything look on the picture. And also the text on the dropdown menu: “Which option best describes your current role?” Have something like padding and it isnt aligned with the placeholders above LOOK MY CODE PLS I WILL POST IT IN THE REPLIES.
1 Like
Can you please put your project on something like Codepen, so we can see the code and have a live example. Working off images is not helpful.
For your first question, I’m not sure I fully understand it but you have given the #survey-form element a fixed width which might cause an overflow I’m guessing.
As for your second question. That is because when you use one of the option elements as the “placeholder” text it gets the default indentation of the option elements. If you want you can target that element and give it less left padding to correct for it.
Edit: Also the example project is there to give you an example, it is not meant to be copied. If you want to make it look like it that’s fine but try not to copy the code too much.
i removed the fixed size and the problem is still here.
Also requesting that you post code, not pictures of code, and if possible a live version on CodePen or whatever. It’s not possible to copy paste pictures into an editor, and it’s almost impossible to read them on a phone.
As it is, have you set box-sizing: border-box; on everything. Otherwise you need to factor in the size of borders and padding into any widths. ie
*, *::before, *::after {
box-sizing: border-box;
}
At the top of your CSS
@DanCouper Good call. I just saw it on the body (didn’t really think about it not being inherited). The original code does have it set, so I kind of just assumed it was.