Survey Form CSS Help

Hi, can anyone offer some advice on my project? I pass all the html tests but having a hard time with the CSS. I am trying to make my form similar to the one from the example. I have seen some other examples and besides label and input class, these are both grouped in a row class. What is the reason for this?

Here is mine: https://codepen.io/danh4648/pen/EJzdwp

Hmm, what kind of advice are you after?

Just looking at your existing project I would say you want to think about some design fundamentals.

The basics are to make sure your elements all have appropriate space around them so everything doesn’t feel to squashed, and to think more intentionally about layout (rather than just having everything centred but not squared off nicely)

To answer your question about grouping things together in rows - without seeing exact examples it’s hard to say for certain, but what you are probably seeing is the way people think about their page as a grid and put elements in appropriately spaced rows and columns to assist their layouts.

Sometimes people do this with frameworks like Bootstrap or Materialise, or they might just use custom CSS but continue to use those row / col conventions.

Once you know what you want your page to look like ideally, then you can start to find out how to implement it in CSS or with the help of a CSS framework.

1 Like

Right now your labels and inputs have divs as their parent containers. divs are block level elements, they take up the full width of the parent container.

If you group the inputs inside a container and change the divs to spans you can see what I mean.

<div class="input-container">
  <span class="labels">
    <label id="name-label" for="name">*Name:</label>
  </span>
  <span class="input">
    <input id="name" type="text" placeholder="Enter your name" required />
  </span>
</div>

But it would be better to use this structure in my opinion. This way you also get an implicit connection between the label and its associated input.

<div class="input-container">
  <label id="name-label" for="name">
    <input id="name" type="text" placeholder="Enter your name" required />
  </label>
</div>

Or you can use a flex container.

<div class="input-container-flex">
  <div class="labels">
    <label id="email-label" for="email">*Email:</label>
  </div>
  <div class="input">
    <input id="email" type="email" placeholder="Enter your Email" required />
  </div>
</div>
.input-container-flex {
  display: flex;
  justify-content: center;
  align-items: center;
}
1 Like

When you use the flex container why do you add a separate div around the label and the input? In the example before that one you have one div around the label and input.

This is my html now: https://codepen.io/danh4648/pen/EJzdwp

It is more centered now, starting to look better. I have tried adding some CSS but still looking bad. I am trying to model it after this survey: https://codepen.io/freeCodeCamp/pen/VPaoNP?editors=1100

I’ve got the vertical spacing sort of okay now but I am having trouble with having everything line up down the column nice and neat like the example I am trying to emulate.