Survey Form finished - any feedback?

[lepros]

I just finished this Survey Form project. I just wanted to share it in case anyone would like to offer any feedback:

https://codepen.io/lepros/pen/zYzvQab

[jwilkins.oboe]

HI @lepros !

I think your page looks good.

For smaller devices, it looks like all of the inputs and text area do not fit in the container.

It looks like you have a small error in your css.
Run your code through the codepen css analyzer.

Keep up the good work!

[lepros]

@jwilkins.oboe The only error the analyzer found was that the #survey-form selector was being used twice. I took the one style I had in the extra selector and condensed it into the fuller one. That didn’t solve the problem for smaller devices though. I tried adding max-width: 100% and height: auto to #survey-form but that didn’t work. I have no idea what I’m doing.

[jwilkins.oboe]

When I increase the width in the survey form selector to width: 100%; then it resolved the issue.

Also for the #comments selector you have a fixed width of 400px.
When the screen size goes below 400 then the textarea will spill out of the container.

You can change that to use percentages instead.

#comments {
  height: 100px;
  width: 80%;
}

[lepros]

@jwilkins.oboe Thank you. I’m now having a problem with #boxes. I don’t know why it won’t behave like everything else. It wants to sit on the left side of the container for some reason. When I give it a large margin as it is now, it looks fine on my monitor. But on my phone it’s falling out of the right side of the container. Please help.

[jwilkins.oboe]

I just deleted the margin-left: 500px; for the #boxes selector and that fixed that problem.

You might also consider adding some padding to the #survey-form selector.

#survey-form {
  padding:20px;

I think it gives it some more room so the inputs aren’t right up against the container.

[lepros]

When I get rid of the margin-left: 500px it looks like this:

[jwilkins.oboe]

For the boxes div you can use flex to center it.
You can also play around with justify-content and see if you want to use center or space-around.
You can see what you like better.

#boxes {
  width: 100%;
  display:flex;
  justify-content:space-around;
}

I just moved the p tag outside the boxes div and center the text.

   <p class="center-text">What types of items did you purchase?</p>
  <div id="boxes" class="field">

.center-text {
  text-align:center;
}

That’s an option.

[lepros]

Using flex for #boxes and moving the p tag out of the boxes div worked. I used the id’s of each checkbox to get the spacing right. Thank you @jwilkins.oboe for all your help. I couldn’t have done it without you.

[Jaydog]

It does look good.
Deffinately main issue is making inputs responsive, I would give name,email,number and dropdown a responsive value like width 80% or so. I’d also give them perhaps 5px padding as the boxes are a touch skinny.

[lepros]

After I added that padding, the default text in the dropdown (“small”) is cut off. When I increase the padding to 15px, it disappears completely. Any idea how to get it to show the text completely with the 5px padding? Thanks.

[Jaydog]

I did notice that with yours though I wasn’t sure why it’s doing that. It doesn’t happen quite the same with mine. I’ve actually used height rather than padding for my name,email and number inputs though padding works just as well.
I have just been playing with my dropdown to try and see why yours is doing that. My dropdown seems to work with either height or padding but needs to be a decent amount or it cuts some of the text off. .
Here’s a link to mine in case you wanna have a look

Survey Form

Just been playing with yours, giving your dropdown a height of 31px or more seems to sort it though yours doesn’t seem to want to work with padding where mine will. Not sure what witchcraft is a t work to be honest

[lepros]

I increased height by 5px and that worked. Yours looks so good. I think I’m ready to call this project done. Thank you.

[Jaydog]

Thanks ,
finished my projects a month ago but I still go back and play with them when I need a break from struggling with javascript. Might remove all the html <br> from the survey form as for reasons I don’t fully understand or agree with these things are taught in the course yet we are not supposed to actually use them according to the experts.