Survey Project Feedback please and TIA

Code Feedback
1

Looking for feedback on my Survey project.

Thanks!

1 Like
2

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.

Improvement:
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.

3

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:
    Screenshot_2020-09-03_08-14-31

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

4

I made some updates. Thanks for your help.

5

Great work! :+1:

There is a small overflow on Firefox:
Screenshot_2020-09-09_08-37-53

On Chrome it works as expected without overflow.

6

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?

7

It doesn’t overflow anymore. It is a little bit “inconsistent”, because it is not centered.
Screenshot_2020-09-10_08-23-24

On Chromium it overflows:
Screenshot_2020-09-10_08-25-35

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:

Screenshot_2020-09-10_08-46-17
Screenshot_2020-09-10_08-46-17723Ă—313 20.2 KB

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)
8

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