Survey Form Feedback -

Just finished my survey form project was hoping to get some feeback.

Thanks in advance

2 Likes

Looks good for desktop, but the layout is broken for mobile.
check:


This Is becasue of image-ed radio button I think.
For mobile this is better you place the radio buttons vertically(each one in one line)

For mobile I also think the padding is too much! I suggest padding:3vw;

You also forgot some label tag for some input elements like two checkbox buttons at the end of the form, please fix.

The images you used come with same-origin policy, so we may not see the images as in screenshot. This is not critical for now, but try to host images by your own domain later when you enter the enterprise level.

I also suggest you add one disabled and selected(default) option for comboboxes.

Having constant element width using absolute units(like pixel) is not recommended. juts like width:200px for your .textbox css rule, use relative units, and min/max values when possible.

For now I would ask you fix the layout for now. Like to see some update and progress with some great progress and updates soon.

You may also have a quick read of this survey form challenge walkthrough article comes with more explanations, code samples and tips.

Keep going on great work, happy programming.

1 Like

Great feedback thank you. May I ask which device you were using when you experienced the format issue?

Chrome on desktop. I just resized the preview panel to that size.

Ah I typically don’t try to optimize for any smaller screen sizes than iPhone 6 in the chrome dev tools. My suspicion is that the market share of any phones less than 360px is very small now. I should probably go to at least 320 though since there are probably some iPhone 4s/5s hanging around.

Try not to code this way, I’m not telling you do something works for 1 pixel width size screen, but as you stated, there are some small devices out there like iPhone SE.

Also considering one Fact: A zoomed iPhone 6 is just like a iPhone SE.

Just like me I applied 125% for everything, becasue I like more larger stuff for easier read.

But the layout break of your page, is an issue, I believe you can fix it very easy. try to code compatible, make it a habit.

Keep going on great work you great passionated dev. Happy programming.

I’m a little confused what you mean by having “one disabled and selected(default) option for comboboxes.”?

Do you mean the checkboxes?

Also thanks again I really appreciate this feedback

Check this sample

or try this

<select>
<option disabled selected hidden>Select your fav lang</option>
<option>C/Objc/C++</option>
<option>Swift</option>
<option>Ada</option>
<option>HLA</option>
</select>
1 Like