Finished Survey page, looking for feedback

Code Feedback
1

Hi everyone,

I’m trying to get back into learning CSS, and just completed the Survey project. Here’s the link to the Codepen:

https://codepen.io/aemann2/pen/LYREjNw

A problem I found is that it was difficult to optimize the page for mobile after I’d finished. For example, I wanted to have the text enlarge for mobile screens, but when I tried doing that it produced a lot of other layout problems, so in the end I decided to keep the layout the way it is now. How do others avoid this problem? Do you design the mobile page first, then go to the regular page? Or do you just know all the things to do to adapt to mobile? Is there anything to make this easier, like using relative units rather than absolute, so that things scale on a smaller screen?

Also, I’m looking for any feedback on how I can make the page more responsive. I notice that things look a little wonky when I resize. This is something I’m working on but any feedback on responsiveness (and any other feedback in general) would be greatly appreciated.

Thanks
-Adam

2

you can use a @media query and under a certain screen width:

  1. set #survey-form flex-direction to column.
  2. give #input-1 and #input-2 widths of 100% of however wide you want.
  3. change font to whatever you want.
3

Your form looks good @aemann2. 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.
  • 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>’
  • Run your HTML code through the W3C validator.
    • There are HTML coding errors you should be aware of and address.
      • I see what you were trying to do. Revisit this lesson
  • Make your page responsive. Remember, the R in RWD stands for Responsive
    • There’s a horizontal scrollbar on smaller screens

After you finished…what? If you mean after you finished the HTML then the you want to set your browser width to the smallest it can be and write your CSS so the page displays well. Then slowly enlarge the window and see at which breakpoints you want to reset your layout.

I guess I already answered the above but yes, this would be your best approach.

Relative units always over hardcoding pixel values. Widths in percentages over hardcoding pixel values.

4 
After you finished…what?

I meant after I finished the CSS styling of the page (in other words, once I was completely done with everything. The method you suggested makes sense though – start with a small mobile window and write for that, then enlarge and adapt. I’ll give that a try for the next project.