Second Project - Survey Form - Do review!

I completed my second project today. It was quite challenging than the tribute page.

Here is the link: https://codepen.io/junaidshaikh_js/full/abZXLQm

Please feel free to correct me and help me improve.

Thank you.

4 Likes

Hey @junaidshaikh_js
I like your design and color.
Nice work

1 Like

Hey @junaidshaikh_js!

I think your form looks good. Just a couple of things.

  1. When I resize the browser window, the title is a little large for smaller screens.

Great job!

Keep up the good work!

1 Like

Hello Junaid,

Nice background.

I would do the following modifications for the mobile screens:

  1. Increase the width for form container (id: survey-form) to maybe 80 to 90vw.
  2. Set the width of the form description (id: description) to maybe 90%.
  3. Reduce the font to a suitable size.

Thank you.

1 Like

Thank you so much @codely for sparing time to look at my project.

Thank you @jwilkins.oboe for checking out.

The white space there wasn’t intentional, I fixed it up. Also, I changed the font size for smaller screens. Please check it once if it’s all right.

One thing I am not getting is why I am having a scroll bar at the end? Will you please let my know?

Thank you @thinkingape46 for sparing time to look at my project.

I did couple of change, please have a look again.

1 Like

Hello @junaidshaikh_js, thanks for looking into my comments.

  1. The page on my mobile screen looks good to me. earlier it occupied 60% of the total width of the screen and looked smaller on the mobile. My opinion is subjective, but you get the point I am making.

  2. I see a horizontal scroll bar on the page (In my opinion, horizontal scroll-bar is not desirable), I believe it’s because of a negative margin of -1.5rem for the title (id: title). I am not sure if the margin is intentional.

Thank you.

1 Like

Nice work @thinkingape46, I like the user-friendly design and the background Image(great choice), But I think you should edit some text color like the “submit” button’s color and bg-color are somewhat dark, try using a lighter color, Other than that great work and Happy Coding

1 Like

I looked up horizontal scroll bar issues on google and ran across this answer.

Your use of vw set to 100 might be contributing to the issue.

1 Like

Yes, @thinkingape46 the horizontal scroll bar was due to the negative margin.
Thanks!