Before And After survey form feedback appreciated

Hey previously i posted earlier on a survey form feedback , thanks for those who replied. Feeling unsatisfied, i redid the survey page again, and I’m quite happy with the results please do feedback on the new form page :smiley:

original: https://codepen.io/balancedsan/full/LBwWxB/
new: https://codepen.io/balancedsan/full/QVLQyp/

2 Likes

your new seem great but try and make it responsive … great job.

it is responsive :open_mouth: may i know which pixels did u view it on? . It should be responsive once u hit below 700px. Thanks for the feedback :slight_smile:

1 Like

change it to 1000px :smiley:

1 Like

Great work you have fixed it… it look better now … fantastic…

Basic design looks decent and easy to work with on my laptop.

Images did not scale down well when viewed on my phone (particularly the cast-iron skillet image). Also, on mobile, the checkboxes and radio buttons are all displayed vertically. But with font-icons, text, and the buttons all stacked on top of each other, I can’t even see the whole radio button group in one screen! Perhaps you could modify the layout to keep the radio button and checkbox groups slightly more compact. That would be a better UI, I think.

Last, in your CSS, I see you chose 1050px as your single breakpoint. Any particular reason for that choice?

Hi thank you so much for your feedback , yes intentionally picked 1050 as media breakpoint because for some reason 700 -900 range is not responsive as one of the feedbacks. hence i change it to 1050 as a breakpoint after trying around with google chrome.
I understand the images does not scale well on phone , i havent fixed that part yet.

As for the radio buttons to be stack ontop one another that is intentional for mobile view to take the full width for each radio and checkbox. Forcing the radio and checkbox to be next to each other will make it harder for smaller screens for view when i looked with chrome tools. Accounting for smaller screen that are 640px - 680px width like iphone 5."

It didnt came to me to put the radio more compact due to the space of the radio buttons icons i have used. Putting them sideby side will make the look squeezed unless the icons are removed when i thought about it. But i see your point that it reduces UI if they are not compact to each other