Restaurant-Survey Form

Well done. Looks nice. I ran the html analyzer and there’s some attributes missing for the text area.

@shwetapatel3591 Here is a tip. Steffan153 showed you how to view the website in mobile view in the dev tools.As a challenge, I suggest trying to start a project at that size (the smallest iPhone 5) and expand outwards adding media queries where the design breaks. You will have to use

 @media (min-width: ??px) {
  /* code */
1 Like

@ericlyv Thank you. I will look into it. Actually, I know about that analyzer attributes missing but I don’t need it. Though I try to solve that issue.

@brandon_wallace I am not sure but I think it is as following:

@media (min-width:320px)

Please give your response to it. And again thanks for your suggestions.

1 Like

@shwetapatel3591: Yes, that is correct for iPhone 5/SE. :smiley: You can see the dimensions at the top, like this:

@Steffan153 Thanks a lot!

1 Like

@shwetapatel3591 Hi, here is an example of a mobile first media query.
You should use the break points that you need for your particular design. Every webpage you create will be different and require you to use different break points.

@media only screen and (min-width: 400px) {
  .title {
    font-size: 6rem;

@media only screen and (min-width: 500px) {
  .title {
    font-size: 7rem;

@media only screen and (min-width: 600px) {
  .title {
    font-size: 8rem;

@media only screen and (min-width: 700px) {
  .title {
    font-size: 10rem;

@brandon_wallace Thank you for the suggestion. I appreciate it.

Wow! nice survey form!!
Some things you need to change:

  1. You wrote ‘Which is your most favourite cuisine in our restaurant?’. You need to re-write it to ‘Which cuisine is your favorite in our restaurant?’
  2. can’t I pick all of the cuisines? I’d eat almost anything.
  3. Great job!

@ConnerOw1115 Thank you so much for your feedback. I will make the correction.

@Steffan153 How did you do the blurring text??
that is so cool!!!

@ConnerOw1115 Thanks. It can be done using opacity property in CSS.

@ConnerOw1115 Wrap your text with spoiler tags, like this: [spoiler]This will be blurred[/spoiler]

@shwetapatel3591 Using that would be pretty complicated, putting style and script tags in your post. You can also select your text and click the gear, and click “Blur Spoiler”. That will wrap the text in the spoiler tags. Also, just opacity wouldn’t do it. You would mainly need filter: blur(1px or 2px). Here’s a pen I made trying to reproduce it:

Noticed some issues (atleast from my side…)

1: “Restaurant-Survey Form” block is with different colors (black/light yellow).
(even background image don’t have such palette)

2: If i check website on computer, text string is very wide… That’s reason i don’t like how last word ‘comments’ is on separate line.

3: I think you should add dotted line or more space between zones…

  • Info about client
  • Info about restaurant
  • More information

4: You set email required, but if im 70 old and i don’t have such thing…

5: Fill form is huge, but radio and checkbox so tiny, i can’t even see what i selected…

6: Maybe not so huge issue, but email,name,age inputs centered, but not dropdown and radio selections

7: Textarea is very close too ‘Other’ … So maybe i need to fill that after i select ‘Other’?

8: Textarea should be with min-height :slight_smile:

9: Button hover color looks strange

1 Like

@pastuh Thank you for your suggestions. I will try to solve the issues.

1 Like

I can help if needed :slight_smile:

@Steffan153 Thanks. I will ask you if I need your help.

1 Like

For a color picker, Google for “color picker” and Google will give you its own.

1 Like

You can make radio and check boxes bigger, with transform: scale(1.5 or whatever scaling point); that’s almost the only one you can use to customize those things

1 Like