Challenge: Build a Survey Form, review and help

Hi everyone!

I’m finishing this challenge and I would like to have your reviews! : https://codepen.io/LucasSlrs/live/qBZOXeN
Also, I’m having some trouble with the web responsive part, the “dropdown” menu is too large for mobile version and I don’t know how to fix it.
Thank you! :slight_smile:
Challenge: Build a Survey Form

Link to the challenge:

1 Like

Hi! It looks pretty good and for the mobile responsiveness, I wouldn’t stress too much about that but you could put a media query that decreases the dropdown menu size.

2 Likes

Your page looks good @LucasSlrs but it’s not a form, yet. It has elements of a form but it’s missing the form element. Some things to revisit;

  • Keep the test script when forking the pen (<script src="https://cdn.freecodecamp.org/testable-projects-fcc/v1/bundle.js"></script>).
    • The test script should be included, with all tests passing, when you submit your projects.
    • Your page passes 1/17 user stories. Click the red button to see which test(s) are failing and text to help you correct the issue.
  • Codepen provides the boilerplate for you. It only expects the code you’d put within the body element in HTML. (No need to include the body tags). For anything you want to add to the <head> element click on the ‘Settings’ button, then HTML and add it into the ‘Stuff for <head>’ box.
    • The link to the font goes in the box labeled ‘Stuff for <head>’
    • Mentioning because you have many elements placed incorrectly. Everything the browser renders belongs in the body element. So the main and the h1 and h2 elements are incorrectly placed. The link to the font belongs in the head element, not outside it.
  • This </br> is not a valid HTML tag.
  • Do not use <br> to force line breaks or spacing. That’s what CSS is for.
  • It needs to be responsive. On smaller screens you have a horizontal scrollbar because the dropdowns fall out of the container.
1 Like

Hi!

So, I change everything and now I’m at 17/17 on the script! So that’s a good point :smile:

But now ,I don’t understand why it looks like that: https://codepen.io/LucasSlrs/pen/dyMGJJy
There are huge spaces, the height between texts is huge, I don’t knwo how to make the dropboxes responsives.
Can you help me or guide me please ? :slight_smile:

@LucasSlrs, first thing I’d suggest is to run your HTML code through the W3C validator.

  • There are HTML coding errors you should be aware of and address.

You’ve made the input label a block level element by using <p>. What if you did something like this instead;

<div>
  <label for="name" id="name-label">Name</label>
  <input type="text" id="name" name="name" required placeholder="Enter your Name">
</div>

You’re styling your dropdowns to be large. This is what you have in your select declaration;

max-width: 800px;
min-width: 100px;
padding: 10px 200px;

Try using percentages instead of absolute pixel values. Doing this makes it easier when resizing.

1 Like