Done with my Survey Form! Any review is appreciated! I use css grid and i don’t know if I did it the right way, anyway thanks in advance for any response
Just checked your work.
It’s simple, this is very good. Everyone likes simple designs.
Using placeholder for text field and text area. very good.
All radio and checkbox buttons come with associated label, perfect. But fixt he label for age textfield, it’s broken.
Good spacing between elements. very good.
The only big issue is the layout, it’s broken. As i checked the way you did layout, it’s a little complex and mess, it seems you mixed width, padding and margin so it caused broken layout.
One of the main issues is about your .container
First you control the width as 100% for mobile or 800px for desktop. it breaks your layout, please don’t.
Your media query is triggered when screnn is less than 600px for mobile, and yyou go for 100% width for it.
And when it’s more than 600px, it’s 800px for container.
Now assume screen is 601px, your container is 800px, so it breaks your layout(horizontal scroll)
For block elements(like div) you may not set any width. browser automatically fits it with parent bound.
Instead of width:800px
, you better go for max-width:800px;
Same remove width:100%
for mobile, as I stated, it goes 100%
by default. Now layout is fixed. easy?! yes it is.
Also that 40px padding for left and right side for form is a little much for mobile if you ask me, try something like 3vw
.
I also suggest you apply some padding for textfield and combobox and remove that height:100%
for text fields, I suggest padding: 0.5em;
.
This is a good practice to not override and sizing element using absolute units like pixel. Just like you did for your container and broke your layout. Or the same thing about your textarea.
I suggest you have a quick read about this survey form challenge walkthrough article. It explains more about issues your page have. It also comes with some very simple responsive grid layout(just like you did) with no any issue.
Keep goin on great work, like to see some good progress and update from you soon.
happy programming .
Thanks! really appreciate your help, gonna fix them soon!