Survey-form. Dropdown , radio, placeholder styling problems

Hello this is my survey form page: Survey Form

I want it to look as close to the example (https://survey-form.freecodecamp.rocks/) as possible, but:

1 can’t make space between radio and checkbox options bigger
1.2 and the radio buttons themselves and checkboxes themselves bigger
2 want to separate my textarea placeholder so I can style it diffrently from others
3 want to make my dropdown menu answers bigger size as well as other answers. Only managed to change placeholder size, but when you type your option it defaults to smaller font -size,

here is my code:

codepen:

thanks for any help or useful links :wink:

1 Like

Hi @Batoru

Sorry because I dont have much time for this.
You have a few typos in DEFINITELY, CHALLENGES and “GITTER” words, last one I dont know what that means. I have used Visual Studio Code and Code Spell Checker to highlight those. Spanish and galician are my mother languages, so it is useful. :wink:

But some ideas:

<div class="check">
                <div class="form-control">
                  <input type="radio" id="definitely" name="recommend" value="Definitely">
                  <label for="definately">Definitely</label>
                </div>

               <div class="form-control">
                 <input type="radio" id="maybe" name="recommend" value="Maybe">
                 <label for="maybe">Maybe</label>
               </div>

               <div class="form-control">
                 <input type="radio" id="notsure" name="recommend" value="Not sure">
                 <label for="notsure">Not sure</label>
               </div>
              </div>
            </div>
/* To highlight all the boxes without affect layout */
*, 
* > * {
  outline: .5px yellow solid;
}

body {
  margin: 0;
  background-color: blueviolet;
  color: white;
  font-weight: bold;
  font-family: 'Poppins', sans-serif;

  /* Make body a grid and perfect center all inside it  without became the elements flex-items*/
  display: grid;
  justify-content: center;
  align-items: center;
}

.form-control {
  margin-bottom: 1em;
}

Wrapping form controls into a div you could given the basic styles to all in a single rule.
You also can give all your fieldsets or divs wrapping a few form-controls the same class form-controls-wrapper, for example, and give them the basic styles, like margin and padding, and then use your own classes to style each of them differently. I won’t use <br> for that.

<!-- Instead of this -->
<div class="dropdown1"><div> 

<!-- This -->
<fieldset class="form-controls-container dropdown1"></fieldset>
<!-- Or this -->
<div class="form-controls-container dropdown1"></div>

Remember that you can set flex-grow | shrink | basis on flex-items. It is even better use shortand flex for that.
And also remember that block elements are piled one on top of each other naturally, I dont think is necessary flex-direction: column for that.
Another thing to remember is that vanilla HTML is displayed as good as possible and reponsive by the browsers. So less CSS can be better.
Consider use min-width + width or width + max-width, instead only a fix width (for example, min-width: 700px; width: 70%;), but it depends what you want of course.
I hope that helps you.
Good job! :ok_hand: :muscle: :clap:

1 Like

Tahnk you very much carlosvisator! You made me realize how much I don’t know yet. I passed GRID on FCC but it’s easy to pass… But my main source material is TOP so I will have to catch up with my studying…

1 Like

Hi @Batoru

If you realize how much you don’t know it means you are half way of expertise, it is a good thing. It take time and practice and more practice, I am on it yet, baby steps. :muscle: :ok_hand:

I think the grid on fcc curriculum is not good enough for learn it well, you could check Wes Bos courses, he has several great courses -Flexbox, Grid and JS 30 lectures- for free or Kevin Powell’s YouTube channel and his course Conquering Responsive Layouts (good basic CSS, including Flexbox basis).

Good job and happy coding!

Thank you for the repplies and useful links, will check them out.
I noticed that a lot of curiculum in FCC you can pass easily, but if you want to do the projects nice it is hard, so I am mixing it with TOP where there is a bit more theory, but the curriculum differs a little bit.

1 Like

Hi @Batoru

Happy to help.
Yeah! You are totally right. It is too easy go through the fcc curriculum and we really need to stop an experiment by ourselves about those properties instead of trying to finish it too fast. I did the old one and when I finished I did not know how to start to style the projects. I really needed a lot of more practice and check things around.
New one is better, but maybe it needs some syntax explanations using small examples about important topics before trying to follow their project. CSS topics mostly, HTML is easier to follow. GRID needs a lot of improvement in my opinion. I think Grid it is the best way to start learning CSS, because your will learn how to layout the general page and then you can learn about details, and flexbox, using your own project, wich it helps to learn even faster and deeper.
I think is better learn something and test it. Practice more and even read more about it and then move on. And not trying to learn a lot in just one day. At the end it is faster this way because you won’t need to go back again and again.
I also check for some HTML elements in the HTML standard because they give a small explanation and some examples. And it is helpful read real code and solutions from other profesionals as well.
Dont give up and happy coding!!