Hi
Please provide your valuable feedback. I have used “Flex Box” for survey form project.
For screen < 800px the layout changes to Column mode.
Thanks in anticipation.
Looks nice, very good on desktop, but broken in mobile! just check
Some good parts and progress I liked:
- You set placeholder for text fields, good!
- Size of text fields and combo boxes are same, very good.
- The second combobox comes with no any default value selected, very good. but the first combobox needs a simple fix to come like this too.
Fix you could apply very easy:
- Fix the first combo box default value. (like second combo box)
- Radio buttons and checkboxes have no any associated
labeltags, not good, fix it. - Fix broken mobile layout
Fix mobile layout
Some suggestions:
- Use relative units instead of absolute units.
- Add horizontal line between each section of the form (example after and before radio button group, same for checkboxes, etc…)
- radio and checkbox buttons(by default, not your code) have some a little too much top margin, either add the same margin for the associated text(text at the left), or remove the margin top for radio/checkbox check:
default(current)
to:
Keep going on great work, happy programming.
1 Like
Thanks a lot for taking time to review my project. I will surely take your suggestions & will post another version.
Relative units in % instead of px ?? Or vw, vh etc ???
Also how about boxes taking 100% width for smaller screens ???
should there be labels for each input radio and checkbox tag ???
Yes
Anything works! simple. Don’t take it very hard. but yes you are right, in mobile try to make it fill with its container/parent.
Any text you like to associate to a radio/checkbox should be hosted by a label tag next to each radio/checkbox element(common). Note you need also link the label tag to the related input element too.
Keep going on great work, happy programming
2 Likes
Hi
I have made the following changes suggested by you.
- Using vw units for font-size now & controls now take up 100% width on smaller layouts.
(does this fix the mobile layout problems ??) - Missing labels added.
- Extra margin on radio buttons removed.
- fixed default value of first drop down.
5 horizontal rule added.
Please review.
Good progress! very good.
You added the horizontal line, awesome, looks much better now.
Applied and associated label for radio and checkboxes (but you forgot for “Not sure” radio, and “Challenges Challenges” checkbox, fix)
Okay, now let’s go for more updates.
It’s responsive now, but very bad, check:
too much page content padding!
Font-size is so small! (hint: not-setting the font-size in body will let the browser use the default size which is 1em by default, fair)
Input text are not center, and had a little too much space at right and left.
In mobile, add more space between radio elements, and checkboxes, it’s hard to tap on one when they are so near each other.
The text area at the end is also is not centered, has some margin at left, but not right!
Add more space between combo box options, it’s hard to select correct dropdown-ed element
For mobile, I suggest you remove the left, and right margin of body, also goes 100% width for the form to fit it with screen. Same remove the box-shadow, and border, something like following.
Keep going on great work, happy programming
1 Like
Hi
Thanks so much for analyzing & providing feedback. I have again worked on the things you said. Please have a look at the changes version.
- I couldn’t find how to add space between option elements of select tag.
- I changed vw units to rem. [With vw units i assumed i need not do anything specially for other layouts as it would automatically scale the font.]
How quickly you are able to find issues with my page…like missing labels & mobile layout probs… are u using any tools for this ???