Questions about my 2nd project

Hi there, I’m having some trouble making my form look decent. I appreciate your help:

  1. form isn’t targeting the correct area (line 57 css). Background should be entire form section.

  2. inline-block seems to not be working on .input-checkbox. Goal is to line it up as a column.

  3. What is the purpose in placing each question into a div? (this is done in the example, but the div is never targeted)

  4. What is the point of setting margin to 0 ? This is often done in the example solutions.

  5. I don’t remember learning this, what does it do?:

:root {
  --color-white: #f3f3f3;
  --color-darkblue: #1b1b32;
  --color-darkblue-alpha: rgba(27, 27, 50, 0.8);
  --color-green: #37af65;
}

*,
*::before,
*::after {
  box-sizing: border-box;
}

Thank you!!!

ps I understand the example is meant to show us the best example, but between analyzing their code on codepen and my own it’s not easy to find things in the 300+ lines.


My code so far
https://codepen.io/arshia93/full/JjROgmO

Challenge: Build a Survey Form

Link to the challenge:

This opening div tag should be inside the form tag

<div>
 <form id="survey-form">

Like so…

<div>
<form id="survey-form">

Instead of styling labels maybe you should just add padding to divs. Also make sure your labels are closed properly.
You can add line breaks to column your radio/checkboxes.

The way the solution example works is similar to mine: https://codepen.io/freeCodeCamp/details/VPaoNP

I don’t believe I’ve learned about line breaks yet. Shouldn’t flex column work on the checkboxes?

you open a div, then the form, then close the div - the form is then considered closed before the div, otherwise it would make an impossible box, that’s why the styling stop there

1 Like

Like @ieahleen confirms you need to correct your div tag placement.
I dont think its recommended to copy exactly what Freecodecamp has done. You need to do it your way to show you understand the concepts

yes, yes, do not use line breaks (<br>) for making spaces between elements, it’s an accessibility issue, the only reason to use it is if you need a line break inside a paragraph, like in an address or poem

2 Likes

Thanks for pointing out the div issue. I’m not yet used to Codepen, it’s hard to organize everything in a codepen without the vscode lines linking parents and children.

Any clue why the flex column isn’t working?

.input-radio, .input-checkbox {
  display: flex;
  flex-direction: column;
}

Answers to any of the other questions would be really appreciated as well if you have the time or want to review my current submission in general. Thanks :slight_smile:

Hi @am93!

It looks like you have made some changes from when you original posted your questions.

If you look at the sample, they are apply a class to each of those divs and styling the class.

You are adding divs that don’t really serve much of a purpose there.

Like here

  <div>
    <label class="heading"> Age: </label>
    <input id="number" type="number" min="18" max="99" placeholder="22" required>
   </div> 

I would personally delete these divs unless you are going to apply classes to them.

Sometimes when you see stuff like this it is called a css reset. Each browser has their own default styles. So this reset pushes everything to the top and to the far left. From there you can style each element to your specifications.

margin:0;
padding:0;

This article goes more in depth in css resets. https://css-tricks.com/reboot-resets-reasoning/

This code is dealing with pseudo classes.
Here are some in depth explanations that should help.


When it comes to the samples, the goal is not to copy the sample code or rely on it that much.

It is just there to show you one way to do things. There are multiple ways to build a form.

It is totally fine if it is not perfect or super polished. You are just starting out. I would build more of the html code from scratch away from the sample and that will give you a better understanding of what is going on with the code.

Hope that helps!

2 Likes

Hi @jwilkins.oboe, hope you’re having a good day. Thanks for your response and sharing the material!

Any clue why the flex column isn’t on my check boxes?

Flex column isnt on your checkboxes bcoz your you didnt close your labels properly like i mentioned earlier
This is a closing tag

</label>
1 Like

When you have html syntax errors like @MrBondx mentioned then your styling won’t work.

@MrBondx got it! I didn’t notice the first time around. Thanks

This looks all good to me.