FCC Survey Page (Need some help)

Hello ! This is my survey page : https://codepen.io/tymothy121/pen/mdrLVqR
and i need some help.
I would like to make the page to adapt to small screens ( like phones, tablets etc.)
I don’t know wich media rules to give to make this happen, i tryed some attributes how you can see.
Can anyone help me ?
Thank you

Hi @timothy01, I’ll get into responsiveness in a moment but before that there are some things you should do.
Clean up your code. Run your HTML code through the W3C validator and address the coding errors. And remember, an id must be unique within the document.

Do not use the <br> element to force line breaks or spacing. That’s what CSS is for.

For something simple like a form you probably do not need to use a media query to make it responsive. One thing that will help is to not use fixed dimensions on elements, use max-width/height and relative units like % and vw to keep everything responsive.
To see how you have your elements defined temporarily add the following at the top of your CSS

* {
  border: solid 1px red;

That will help you to see how elements are falling out of the container.

Thank you , I am grateful for your help!
I just cleaned my code and finished the task.
I hope that it’s ok, i try it to make it responsive to small screeners to.
When you have time you could take a look and tell me if it’s something that need to correct.
Thank you again.
Have a nice day!

Good job cleaning up the syntax errors @timothy01. There are some things you can 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.
  • Codepen provides validators for HTML, CSS and JS. Click on the chevron in the upper right of each section and then click on the respective ‘Analyze’ link.
    • The one for CSS is good. Use it and address the issue(s). (You may have to click it again after fixing one issue to see the next. Keep doing so until all issues are addressed.)
    • (The one for HTML misses things which is why I recommend W3C)
  • This is minor but change the ampersand to the HTML entity to be compliant with the reserved characters standard
  • User’s should be able to click on the label to toggle a selection, not just the radio button / checkbox
    • There’s a duplicate/typo for one of your radio buttons that prevents this
  • User’s should not have to delete anything from the textarea to add their comments. It’s a bad UX to have them do that.

I don’t often comment on design but there are a few things you should reconsider;

  • White text on a light blue background doesn’t offer much contrast
  • Radio buttons / checkboxes being above their labels makes it hard for user’s to see what’s happening. (Have you ever filled out a form like that?)
  • Make the opacity a bit darker. It’s hard reading the text against parts of the background.

Thank’s for your help.
I have made some changes but i have some issues.
I can’t understand some things,
could you please explain me .

  1. Test script need to be included in html right? at begining?
  2. What you mean by change the ampersand to the html? i can’t get it.
  3. I am struggling to make the radio buttons to stay one above another , i dont know how to do it without <br> , could you explain me how to do it by css and not by <br> tag?

If you’re using codepen then yes, you can put the test script at the top of codepen’s HTML editor.

Not “to the html”. Change it “to the HTML entity”. Did you click on the link provided? It explains what an HTML entity is. The link also shows the four reserved characters in a table and what entity you would use in your code to represent them.
The table shows the character & can be replaced with &amp; which is what I’m saying you need to do.
I’m not sure what part you don’t understand so you’ll have to clarify for me. I don’t see where you’ve made the change in your code.

It’s not done in CSS, it’s done in HTML. Instead of using <br> elements to have each inline element on a new line, use or set container elements to be block-level elements so they’ll each take up the full width.

On a side note, when replying use the reply button in my post or use my name (@Roma) so I get notified when you reply. When you use the reply button at the bottom I don’t get notified. I stumbled across, hence the delay in replying.

Your form is looking better @timothy01. Some additional things to revisit;

  • I’ve mentioned this previously. Codepen provides validators for HTML, CSS and JS. Click on the chevron in the upper right of each section and then click on the respective ‘Analyze’ link.
    • The one for CSS is good. Use it and address the issue(s). After correcting one error check again. Keep running it until it finds no more errors. It looks like you copied and pasted the same couple of errors multiple times in your stylesheet. Also, there is something called the DRY (Don’t Repeat Yourself) principle. You repeat the same font-family throughout. You can define it in one place and it will cover throughout without you have to repeat it over and over and over.
    • (The one for HTML misses things which is why I recommend W3C)
  • For responsiveness, start with the narrow view (mobile) design first and then work your way wider, adding breakpoints where needed for the wider design.