Survey Form on E3 - Feedback welcome!

Hi campers!

I have just finished working on my survey form. I would love to hear some feedback on how to improve it though, as I feel the layout might be a bit too simple.

E3 Survey Form

Thanks and happy coding!
Rossella

Really nice page. Just from a technical point of view, i would add some media query for the mobile in order to increase the width: 60%; of the form selector. Think its a waste to loose 40% of your mobile display for showing nothing but a background.

I would also try to vertical center align the checkboxes with the imgs.

Anyway, good job. As you met all user stories the project passes all tests. :+1:

1 Like

Here some idea on making the page more responsive:

#optionbox {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
}

.gameoption {
  display: flex;
  align-items: center;
}
1 Like

Hello guys i made the survey form please do check and review it.Below is the link and Thank You
https://biradarsidduram.gitlab.io/SurveryForm/

Really nice page and i think you can make the checkbox in the middle of images.
Thank You.

1 Like

Thank you very much, @sorinr! I have implemented your suggestion, and I agree it looks better on mobile!

Great work, like the desing.

Everything is great, I would just provide some suggestions about it.

I think in mobile view, border and margin/padding wasted some space for table content. I think if you go fit the form to width for mobile could be better, to use maximum space for page content.

Same in mobile I think if you leat each line/row host only one element could be great. example, let labels in one line, and text field in next line(not both in one line), same let tetxbox go fit the container.

In mobile also some items are centerd, but some are not. I think place them eitehr all in left, or center could be better.

You also forgot to set placeholder for text area, please fix.

having a little more padding for textfield and combobox could be great, specially for mobile view.
Note: you set height for text field, please don’t. let browser apply enough space for element. if you want to make the text field bigger, you may use padding, or bigger font-size, or relative unit like % which may not work all teh time(padding and font-size is recommended)

here is my article about survey form challenge walkthrough, I added some very basic, responsive nad working layout template with grid there, you may have a look and check how does it apply maximum space of screen width for form, hope you find it helpful.

Fixes are so easy, please apply, specially remove all constant forced heigh override for any element like textfields.

Keep going on great work, happy programming

1 Like

Thank you so much for the detailed feedback, @NULL_dev!
I have made some changes to my survey form on mobile, especially the text alignment, which was all over the place. I have also made the form itself take up 90% of the space on mobile - I didn’t go full 100% as I like the contrast between the background of the page and the background of the form.
And I have bookmarked your walkthrough post, so helpful!!
Thanks again

Good progress.

For small screen it’s still broken, but the fix is easy. let me explain.

Assume you have container element(let say your body).
Now you have an element(let say your form) inside the body and you set 20px of padding(not 20px space internal from each side). There is also a 2px border. And you ask for 90% for width. just like your form css rule.

form{
width: 90%;
padding: 0 20px 15px 20px;
border: 2px solid grey;
}

Now let me why this could break your layout for mobile like following check:
image
Note the horizontal line. It means layout it broken.

This is becasue of following

If we assume body is 300px wide.
So form will have 90% of it which is 270px.
By default margin, border-width, and padding will be calculated with element size.
So target for will be 270px + (20px left padding)+ (20px right padding) + (2px left border-width) + (2px right border-width) which is 314px, so it’s more than available parent 300px so scroll and broken layout.

The fix is easy, just add box-sizing: border-box; to your form. it means you should not calculate border-width, padding and margin for target form size. so it will be 90%(270px), and won’t cause any scroll.

but after this fix, another issue is here, check:


You see one element gone out of the parent bound, and it’s not good.

One reason is becasue of that 90% of width for your form, same kind of a little too much padding.
This is why I suggested, using full width in mobile could be a good thing. becasue in mobile, space is gold.
My suggestion is having less padding, no any border, and let the form fit with screen, check:


But this is my suggestion, you may go any form you like, but make sure layout is great.

Keep goin on great work, happy programming.

1 Like