Css issue w/ form project

HTML-CSS
#1

Tell us what’s happening:
So I was able to complete all the requirements for the survey form project in the html section, but in the CSS, I was having a lot of issues. Im not sure if it’s because of the way I structured my classes and IDs, but its very messed around. I need help finding a solution because I am lost. My goal was to move the content to the middle, with the red background behind it with the opacity level only applied to the background and not the text. Also was trying to put the main “input” bars for name, age, email etc. below their respective titles but couldn’t manage that either.
Link to my project:
https://codepen.io/CAMZhAck/pen/jOMgVpv

Your code so far

Your browser information:

User Agent is: Mozilla/5.0 (Macintosh; Intel Mac OS X 10_14_6) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/87.0.4280.88 Safari/537.36.

Challenge: Build a Survey Form

Link to the challenge:

#2

That’s great! Good job on getting that part done!
For centering the elements in CSS you need to typically use margin*.
In your case you would want to center all of the survey form not just labels.

For applying opacity what is happening is you are having it for the whole section element so it also applies it to anything inside including the text. And it seems like you have already guessed that yourself.
One solution for that would be to exclude the elements inside the section element not to have opacity with pseudo-class*.

I have marked two words with asterisks which are the clue for finding the solution you want. You can just google these two and you would have your solution.

Good luck! And let us know if you have any questions.

#3

@CamzHack, before you start styling there are some things you need to revisit and correct;

  • 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 6/17 user stories. Click the red button to see which test(s) are failing and text to help you correct the issue. (Be sure and read more than just the first line of the failing message.)
  • 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.
    • Mentioning because you have elements out of order. Everything the browser displays belongs in the body element. Review this for an understanding of the HTML boilerplate tags.
  • Revisit this lesson. Users should not be able to select all of the radio buttons.
  • Once you meet all the user stories and have no syntax errors in your code then start with styling. You don’t want to start styling now and they try and make things fit.

Some things to note,

  • users do not have access to your google account so they will not be able to see your background. search and find a place that allows free hosting of images or find a free image and link to it for your background
  • this, align-items: center; is used with flexbox and it seems you’re not using flexbox so it will not do anything for you
#4

Hey Everyone! I really appreciate the feedback. I went back to adjust and work on my styling in the css section… https://codepen.io/CAMZhAck/pen/zYoGvMV check it out!

Hope to hear any further advice

#5

Looks a lot better @CamzHack. Some things to revisit;

  • Run your HTML code through the W3C validator.
    • There are HTML coding errors you should be aware of and address.
    • Since copy/paste from codepen you can ignore the first warning and first two errors.
  • Change the cursor to a pointer when hovering over the submit button
  • Make your page responsive. Remember, the R in RWD stands for Responsive
    • There’s a horizontal scrollbar on smaller screens

Notice how I mention you by name, mention me by name (@Roma) and I’ll get notified when you reply