Phone Usage Survey

I’d love any feedback on my version of the survey project. I spent more time on it than I should have, but I wanted it to look good and be responsive.

I liked that you made it look like the survey was on an phone but when resizing to a smaller width, that concept was lost. You may want to look into that.
When in codepen, click on the down arrow in both html and css, there’s a link in there for you to ‘analyze’. Use it and correct the problems that it notes. It’s like running your code through a validator.

Thank you @Roma. Do you have a suggestion on what to do in mobile view to give the survey some character?

I did the tests and passed all 17. Am I misunderstanding something?

Yes, the graphical chrome that looks like a phone does disappear at extremely narrow widths, but I call that a feature, not a bug. Besides, the device most likely to have such a width is a phone, and there’s no reason to put graphics of a faux phone on an actual phone :slight_smile:

The only problem I can see at very narrow widths is that the top heading (“PHONE USAGE SURVEY”) could use a little bit of padding at the bottom. Also, at any other resolution, the wood panel background has a noticeable seam at the top of the phone. This probably comes from tiling the background in separate divs, when you should be setting the background in only a single div instead.

@chuckadams Hey thank you for the feedback. I updated the padding. Good point on the background in separate divs. I think I meant to cut it from one div and paste to another. The annoying thing is I don’t see the seams on my laptop, but I do see it on my phone :roll_eyes:

Good point! I agree with you, since it is the width of a phone no reason to put in the graphics.