Hi all!
I just finished my second challenge, the survey form, and I’d love to hear your thoughts. I’m open for all feedback - layout, design, code etc, responsiveness etc.
I had to juggle a ton of nested divs on this one so I’m sure the code is a bit messy. I’ll come back and try to tidy up later! Any ideas on keeping code tidy? Especially the CSS where my media queries are all over the place.
Here is the link:
https://codepen.io/qvistsson/full/oNjZqMZ
Thanks!
Edit: refactored the whole thing, updated the link 
1 Like
I think it looks great! I would remove some of the placeholder text in the name and e-mail sections, or make it smaller, because some of it is hidden. I would also try to do the General information, Habits, and Final thoughts headings similar to the Favorites one. The Favorites one does not have a line going through it, while the other three do. You did a wonderful job!
It does look very nice. One thing I would suggest is to view it at larger text sizes. If you don’t know how to do this, one way is using Firefox, go to the View -> Zoom menu and activate ‘Zoom Text Only’. Then while holding the Ctrl key down, scroll your middle mouse button to increase the text size. It won’t take long before you see some issues.
Also, at narrow viewports I definitely think you should make all of your inputs line up in one column.
@TazExprez
Thank you so much! I adjusted margins and the responsive layout so that the placeholder texts are never cut off. I also fixed the error with the line going through the headings.
@bbsmooth
Thank you so much for bringing that to my attention, I hadn’t at all thought about zooming text only. I tried zooming a few notches and it looks OK (but I’m also not sure how much text zooming it should be able to accommodate - are there any general rules?)
I refactored the whole CSS and learned a lot about selectors. One thing that is driving me slightly nuts is the margin between “Favorites” and “Final thoughts” which is half of what it should be for some reason. All boxes have their margins set by .content-box which should result in equal margins, yet it does not. If anyone has any ideas, I’d be happy to hear! Otherwise I’m ready to submit
At least a 200% increase, but really, it should be able to handle much more than that. When I go to 200% on your form right most radio button starts to break out of the container. And if I start narrowing my browser I get a horizontal scroll bar until I reach a media break point. But then if I keep narrowing even further some of the check boxes also start breaking out of their containers and I get another horizontal scroll bar.
My suggestion would be to base your break points on ‘em’ instead of ‘px’ so that your responsiveness takes text size into account.
1 Like
Thank you so much for taking the time @bbsmooth
It does make a lot more sense to base media queries on EM! I just found a good article on it. I converted all the break points to EM and I think it performs better now at 200% - if you have the time, please have a look again. Many thanks!
Very nice! I always use 'em’s for my break points. And one of the first things I check for when evaluating a web page is how it handles text size increases. You get an A+ now.
I’m also amazed at just how many “professional” web sites can’t handle text size increases.
1 Like
Lovely! Thanks again! I’ll be sure to keep this in mind going forward and not contribute to the problem!