This is the first project I’ve completed so any feedback on my code would be greatly appreciated, especially if you see anything extraneous or ways I can clean it up a bit.
I would also love suggestions on how I can make this responsive for mobile. When I open the survey form on my mobile phone it looks pretty awful and I really don’t know where to begin to improve the mobile layout and functionality. I’m a little lost with media queries.
One way to make sure this looks good on all devices is to use a narrow-first (or mobile-first if you prefer that term) approach.
Narrow your browser as far as it will go and style the page for that narrow width. This will be your base CSS. Then gradually widen your browser and add break points for where you want to change the layout/styling for wider widths.
To be honest, on a form this simple you probably don’t even need break points (though I understand if you want to use them just for practice).
Thank you @hilbug and @bbsmooth for your suggestions! Both make sense although I’ve tried using a media query - https://codepen.io/piper3330/pen/WNRKbZv - if you have a chance would you mind please taking a look and letting me know what you think? I’m definitely still iffy on media queries so I need to check out some further resources for more info and practice.
@piper3330 Definitely on the right track! A few suggestions:
Make the margin 0 in the media query for the form
I noticed your HTML has no opening body tag and you have everything wrapped in a <div></div>. Remove the <div></div> wrapped around everything add the opening <body> tag.
On the small screen, I am seeing the tiniest bit of a margin on the left hand side, which I think is causing the form to scroll to the right. The right has no margin at all. Can’t figure out where that left space is coming from…Maybe it’s just from the FCC unit tests?