Survey Page - gradient, grid, animation, love, tears, etc

Hey there,

I tried to use all the things we’ve covered in the first segment on the survey page and it was fun! I’d be glad if you can take a look. Thanks in advance.

Here is the link: https://codepen.io/uckuruslukopera/full/zazpNq/

Peace,
Merve.

2 Likes

Gave you a like on codepen, it’s really good! Well done!

1 Like

Modern UI, looks rich!

For a second I thought this could be a form about medical record (becasue of colour), but no.

Everything is almost great, placeholders for text fields, default non-selectable option for combobox, title border for radio button section(very good), good spacing.

But for mobile, it could be better. Fix the mobile layout, let each line/row host only one element, and let it fit. Yes mobile layout needs work.
Once you could come with a better layout for mobile, we would go for more detailed review.

I also suggest you center the submit button, use white background, and green(as used in background) for the text.

For now, please fix the mobile layout.

Keep goin on great work, happy programming

1 Like

Hello there,

really appreciate the review. I’ve made some changes for the mobile view, I used flex (yay!)

Instead of changing the button color ('cause I really like orange) the background is more like grocery-y than medical-y.

Thanks again,
take care.

The content of the page is very clustered. Try to keep space between them to not make it messy.

1 Like

The new colour scheme, the yellow one, I think it’s not so sync with other colour, and especially lack of enough contrast with text colour(white), use darker yellow, or use lighter purple and make the text black.

Any colour you choose, just make sure it has good contrast with text colour, no matter what colour. (ex, use yellow and green yellow for bg, and black for foreground colour)

You used media for mobile layout, very good.

One big issue/mistake many devs take here is about using absolute units like pixel while relative values could do the job much much better.
For example, you applied around 160px(god! 160px?!?!) for #survey as following
@media (min-width: 481px)
#survey {
margin: 0 160px;
}
Now do you how does it look?! check:


Much waste of space at left, horizontal scroll? so the fix is easy
@media (min-width: 481px)

#survey {
    /* margin: 0 160px; */
    padding: 0.5em;
}

And now the result:


Now much better mah dude, i call it great now.

The same story when screen size trigger another media query(smaller screen), but this time the layout is broken becasue you applied absolute cols attribute for textarea, please don’t. if you want to control text fields, and textarea advances, use CSS check:
image
simply removing cols could fix it, when you set cols="30", it forces the browser to place the size for textarea, and when screen is not wide enough, it scrolls!

these two media queries

@media (max-width: 320px)
#survey {
    margin: 0 20px;
}
@media (max-width: 480px)
#survey {
    margin: 0 60px;
}

I think margin is a little too much check(removed cols attribute from textarea):

Apply less margin, as following:

@media (max-width: 320px)
#survey {
    /* margin: 0 20px; */
    margin: 0.5em;
}
@media (max-width: 480px)
#survey {
    /* margin: 0 60px; */
    margin: 0.5em;
}

Also let text fields and combobox goes fit in mobile, yes freedom.

@media (max-width: 320px)
input[type=number], input[type=email], input[type=text] {/*note I added input[type=email]*/
    /* width: 60%; */
    width: 100%;
    box-sizing: border-box;
/*and same for combobox*/
  select {
    width: 100%;
    box-sizing: border-box;
  }
}

Now check how does it look:


I think it looks much better, YES.

For now try to apply these things, plus following suggestions:
I suggest you apply flow layout for radio buttons too(like checkboxes, each line for one radio button), as you see word break for a radio button looks not so well(check “Not Sure” label falls to next line, not cool)

Control the text are with css, and remove cols attribute.

Try to use relative units over absolute units, I believe you now have already convinced pixel doesn’t work all the time.

Go for another styling for comboboxes, user may find the combobox just like a bordered container and ignores it.

Very good progress. Keep goin on great work, happy programming.

1 Like

Thank you, i gave them a little bit more space. Take you for your time.

Dear NUL_dev, are you serious? Thank you for your time. Great feedback! Lot of learned today. :slight_smile:

YES! always take programming serious, or you fail.

keep goin on great work, happy programming.

It’s still very clustered.