Survey Project Feedback please and TIA

Looking for feedback on my Survey project.


1 Like

Hey @wagers.mary

Your Survey page is really attractive
I like the colour combinations & font selection , page alignment is proper & looks authentic.
Your css file is impressive.

There are total 9 checkbox in the fav. character field
what you can do is create a div tag or table of 3*3 to make it more readable.

Hey Mary,

congrats on your project, you did a great job so far! :clap:

My ideas:

  • all tests pass, awesome!

  • you can get a code validation:

    • HTML: paste your codepen HTML code into the body
    • CSS: paste your whole CSS code
    • you will see one small error and I think you are able to fix it! :+1:
  • you can increase the overall readability of your page by adding some more spacing, e.g. between the different checkboxes; you can read more about it in principles of design

  • when I decrease the width of my browser, the content gets cut off; a horizontal scrollbar is mostly a bad sign; this is important for people who read your page on a smartphone:

Keep up the great work,
looking forward to seeing your next steps! :slightly_smiling_face:

I made some updates. Thanks for your help.

Great work! :+1:

There is a small overflow on Firefox:

On Chrome it works as expected without overflow.

Interesting. I just tried reproducing the overflow issue on Firefox desktop and mobile and I’m not seeing it. I can see from your screenshot that it’s happening, but… yeah.

That being said, I went and poked at the code a bit more, removed an overflow property that no longer appeared to be necessary and made the fields ever so slightly smaller. Is it still overflowing?

It doesn’t overflow anymore. It is a little bit “inconsistent”, because it is not centered.

On Chromium it overflows:

I think you can reproduce it by using the Zoom of your browser (CTRL + Plus & CTRL + Minus)

Moving elements by using padding with “pixel-perfect” measurements is mostly not a good idea, especially when you have different values for left and right:

.form-sec {
  padding: 10px 20px 5px 10px;

It’s way easier to use flexbox to center it.

I re-worked it a little bit, not that much stuff to change:

red lines: old code
green lines: new code

  • I made the container around label and input a column flexbox that centers label and input, and gave it a consistent padding on left/right
  • because the label should be on the left side, I added align-self
  • the input should have the whole width, not depending on some pixel-perfect padding; also added border-box sizing so that padding and border count to the width so that it is in a vertical line with the left side of the label (all label and inputs are on a straight line from top to bottom)

That is a much more elegant solution. Also, the border-box sizing is really good to know about. Thank you!