My version of Survey Form - coffee order

Hello Marek,

GREAT DESIGN, dude it looks very good, but has some very small issues I note now. I love coffee(who doesn’t?) This brown color scheme really got me, perfect.

Layout looks responsive?! no. Because of one very small issue! Check your textarea, you set the width using absolute unit (width:465px). So it breaks the layout, how? when screen is small(e.g. mobile is 320px), so it causes horizontal scroll, and it’s bad! check:
image
Simply control the textarea width using a relative unit like width:100% (tip: set box-sizing:border-size too)

Check the label for “address” textfield is linked to name textfield. fix it.

Checkboxes come without any label associated! fix them.

I like the radio buttons so much(I vote for espresso, double please), as they look like inline block elements, very cool. If you are know some js, check this sample, and try to make the radio buttons more cool, o yes.
But one small suggestion for this, check this:


check the “Latte” label is next to the radio button, while other labels are located on next line. This is not critical pal, but if you could bring all to next line could be Great!

Your combobox comes without any disabled/hidden selected option by default, please add.

I think text fields and combobox are a little small in size! add some small padding like padding:0.3em could be great.

Not just text fields, I see whole page font size is small for me, so let me give you a tip/note.
I see you did override the global(body tag) font-size to 20px. so 20px is an absolute value. Please don’t!
Because 20px is small for my screen, while could be so huge for another one.
Tip: try not to override the global font-size using an absolute unit like 20px! Instead use em to make the text of some part smaller or larger.
Another tip: no setting the global font-size is the best size. Let user use his default font-size he likes.

Another suggestion I would give you is about the text field and combobox styling. They are white(default style), while your textarea is not.
I also think textare should be more contrasted, use lighter colour for background for example, and use the same colour for tetxfields and combobox.

The Order button is so sharp and cool! but I wish it comes with page colour scheme! Whole page is brown(so cool) but this button is not! I suggest you resync the colour of page elements.

All I notes I added here could be found at this survey form challenge walkthrough article, you have a quick read for more explanation, samples and tips.

Apply the fix, it’s a great work.

Keep goin on great work, happy programming.

1 Like