Survey Form Project Feedback & Mobile Help

Hey everyone!

Here is my Survey Form:

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.

Thank you!

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).

1 Like

@piper3330 Working with what you currently have, you could try this in a media query:

  • make the form a width of 100% on smaller screens
  • decrease the padding within the form
    Let me know how it works out!
1 Like

Thank you @hilbug and @bbsmooth for your suggestions! Both make sense although I’ve tried using a media query - - 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?
  • I was playing around with some of the CSS and updating padding/margin if you want to take a look:

This topic was automatically closed 182 days after the last reply. New replies are no longer allowed.