Responsive Web Design Project 2 - Hill-Side Ice Cream Survey form. Your feedback will be highly appreciated

[deepshah]

Hi everyone!

I finally finished project number 2. It took longer than expected however I’m glad I spent more time on it since the learning outcomes were probably 10x as well.

Shout out to @Sujith3021 @AdityaVT @michaelnicol @lasjorg for sharing their valuable feedback on my Tribute page (Project 1). It helped me improve this project as well.

I look forward to any and every piece of feedback that I can possibly recieve. Heres the link:

IceCream Truck Feedback Form

Its been quite a short amount of time and just one more “simple” project but it feels right to say:
“I learned something new each day and that’s a win!” - @itxchy

Thank you guys!
Hope you all have an amazing day, week, month and year(s)!

[shimphillip]

Good job, I especially the choice of font-family you used. I would

Give some paddings to your input boxes. It will give cleaner looks.
make survey form full width on mobile views.

Happy hacking

[deepshah]

Haha thanks. I have a soft corner for friendly (or cartoon-y) fonts

Just made the changes. I hope it looks better now!

Thank you for your inputs!

[lasjorg]

Looks nice, here are a few things i would do, in no particular order.

1. I would use flex-box for the rows. Makes the labels and inputs line up nicely.

.row {
  display: flex;
  justify-content: center;
  align-items: center;
}

Then you need to change the style for the media query, so it switches to flex-direction column, i would also move the break point to kick in sooner.

@media screen and (max-width: 580px)
.input-field {
    width: 100%;
	flex-direction: column;
}

2. Make the input’s a bit taller.

3. I often disable the resize of textarea.

textarea {
  resize: none;
}

Or you can give it a max-width of some fixed size. Or max-width 100% and let the parent container width be the limit of how wide it can get (i.e. how much it can be pulled by the user).

4. Your button hover transition is a bit slow for my taste, i would probably also use transform: scale(1.2) instead of width and height.

[randelldawson]

@lasjorg’s comment about changing the media query to max-wdith: 580px for the input-field class will prevent the following from occurring.

[Sujith3021]

It looks good, better than 1st

Have the changes mentioned by everyone above, it will make it look good.

Apart from those, i would like you to reduce the transition seconds, since it is making the transition to width and height, it looks soo shaky, i would suggest you to reduce all the seconds for ex: 0.15s, it will be smooth without any shakes. And also apply the same transition to the #submit:hover also, it makes it smooth.

Good Luck

[deepshah]

Woot! Thanks for the feedback.

I tried to make it more responsive so that the boxes dont overflow out of the form container (had some success with that):

Phew!

Although another thing i wanted to do was have the labels and inputs show one below the other to make it a better flow like the one in the FCC survey sample :

How can I do that?

[deepshah]

@randelldawson
Thanks for pointing that out. Have made the changes
I didnt realize it at all - I should double check next time ha

@Sujith3021 Done and done! You were right the transition was super shaky. have made it slower now

[lasjorg]

You can stack the labels and inputs by giving the .row class flex-direction: column; you would need a media query for it. May also want to set align-items: start; in that query.

Summary

@media (max-width: 600px ) {
  .row {
    display: flex;
    align-items:  start; 
    justify-content: center;
    flex-direction: column;
  }
}

[deepshah]

Woah! now I feel stupid for asking that.

I kinda blindly applied theflex direction: column to the.input-field as you mentioned.

If i gave it a thought i should’ve realized giving the.row a flex-direction: column would do the trick