Hi guys, here is my second project, the pizza survey.
Take a look and let me know what you think.
Looks good. for desktop, it’s very great, but for mobile it has some very small issues.
All input elements come with correct label tag, very good. same all have placeholder. very good.
If you resize the preview panel and make it small(mobile width) you see a horizontal line, check:
This is becasue of following:
@media screen and (max-width: 500px)
#container {
max-width: 98%;
}
and
@media screen and (max-width: 500px)
.labels {
display: inline-block;
width: 100%;
text-align: left;
}
Note even you think 98% will never cause a scroll(becasue less than container/parent bound), but by default padding, margin and border width affect(added) this value, so this 98% could be 103% at the end as caused the scroll. Same about the 100% of .label rule.
The fix is easy, add box-sizing: border-box; for both .labels and #container rules.
I also see in mobile you kind of use half of the page(left side) . This is becasue you are using inline-block approach to make the page responsible. I suggest you use a simple grid like for that, check this very simple responsive layout sample.
For mobile let input elements fit with screen/container width, same let the submit button be at the center like desktop.
For mobile add a little more space between input elements could be great. When elements are so near each other, it needs more precious(harder) tap.
Same add some small padding(I suggest padding:0.5em;) for input text field elements.
Like to see some good updates and progress soon. be patient and do the job great.
I think I shared the article about survey challenge walkthrough with you then, have a quick read, it contains these notes I mentioned more in detail with sample codes.
Keep going on great work, happy programming.