# Project "Build a Survey Form" and CSS problem

**URL:** <https://forum.freecodecamp.org/t/project-build-a-survey-form-and-css-problem/254234>\
**Category:** I Built This\
**Created:** [January 25, 2019, 4:47pm UTC](https://forum.freecodecamp.org/t/project-build-a-survey-form-and-css-problem/254234 "2019-01-25T16:47:12Z")\
**Posts on this page:** 15\
**Page:** 1

<div class="post-metadata">

**Author:** ![Theoask](https://sea3.discourse-cdn.com/freecodecamp/user_avatar/forum.freecodecamp.org/theoask/32/63200_2.png) [@Theoask](https://forum.freecodecamp.org/u/Theoask)\
**Post date:** [January 25, 2019, 4:47pm UTC](https://forum.freecodecamp.org/t/project-build-a-survey-form-and-css-problem/254234/1 "2019-01-25T16:47:12Z")

</div>

Hi,

I am currently doing the Responsive Web Design project “Build a survey form”.

I have done all the HTML layout, no problem.

But know I guess I have to write some CSS to align the fields like in the project’s sample.

However I have no clue how to do that: should I use Flexbox? Or bootstrap?

I triued with flexbox, by setting the \<form\< style attribute in the CSS file , using flex-direction and wrap properties but to no avail.

Please give me a hint on how to align properly all the text and input form and text areas to imitate the final result.

My Codepen code: [https://codepen.io/theoask/pen/KJVamr](https://codepen.io/theoask/pen/KJVamr)

The Final Official result I’m supposed to do: [https://codepen.io/freeCodeCamp/full/VPaoNP](https://codepen.io/freeCodeCamp/full/VPaoNP)

---

<div class="post-metadata">

**Author:** ![snowmonkey](https://sea3.discourse-cdn.com/freecodecamp/user_avatar/forum.freecodecamp.org/snowmonkey/32/241579_2.png) [@snowmonkey](https://forum.freecodecamp.org/u/snowmonkey)\
**Post date:** [January 25, 2019, 5:04pm UTC](https://forum.freecodecamp.org/t/project-build-a-survey-form-and-css-problem/254234/2 "2019-01-25T17:04:25Z")

</div>

You aren’t bound to mimic the survey form down to the last jot, simply make sure that all the “user stories” are met. Some folks build a survey form about pets, or musicians, or a seasonal “Naughty or nice” survey. Take this opportunity to make it your own.

For this particular challenge, I would stay away from frameworks as much as possible. They’re out there, yes, but this should be more about you getting comfortable creating your own css.

Use of flexbox is a great idea, if you have a handle on how it works, as is a grid layout. But understand the differerence:

- Flex is primarily intended for a “one-dimensional” layout, like a header or nav-bar, or to set up a columnar layout.
- Grids are designed to handle “two-dimensional” layouts, which would be far more complex. An example of that might be a container with a header area, a left-side navigation area, a main content area, and a footer. Using a grid, one can define grid-areas, and assign elements to them.

In the case of your survey form, there are a few things you might want to consider:

- rather than using `<h4>` tags to label your `<input>` tags, why not use `<label>`s? It is more meaningful, and you can also associate them directly with their input.
- Get rid of `<br>` tags entirely. You will be able to control the spacing with CSS. When you get to that point, those will mess you up more than anything.

What kind of layout are you looking for? Something two-column? Then `flex` might work well. The form itself would get the `display: flex;` and you’d set up the two columns by perhaps creating two classes: `left` and `right`. Set the `flex:` property of those to the desired width of the form container:

```auto
form {
  display: flex;
  width: 80vw;
}
.left {
  flex: 30%;
}
.right {
  flex: 70%;
}

```

After you’ve got rid of those pesky `<br>` tags, simply apply `class="left"` to the items you want in the left column (like the labels), and `class="right"` to those you want in the right (like the inputs, or the selects).

---

<div class="post-metadata">

**Author:** ![Theoask](https://sea3.discourse-cdn.com/freecodecamp/user_avatar/forum.freecodecamp.org/theoask/32/63200_2.png) [@Theoask](https://forum.freecodecamp.org/u/Theoask)\
**Post date:** [January 25, 2019, 5:16pm UTC](https://forum.freecodecamp.org/t/project-build-a-survey-form-and-css-problem/254234/3 "2019-01-25T17:16:27Z")

</div>

Hi. I applied all your instructions and look what I’ve got now. Any feedback possible please?What did I do wrong ? I could feel that Flexbox was the solution 🙂 Just that I didn’t apply it well.

---

<div class="post-metadata">

**Author:** ![snowmonkey](https://sea3.discourse-cdn.com/freecodecamp/user_avatar/forum.freecodecamp.org/snowmonkey/32/241579_2.png) [@snowmonkey](https://forum.freecodecamp.org/u/snowmonkey)\
**Post date:** [January 25, 2019, 5:31pm UTC](https://forum.freecodecamp.org/t/project-build-a-survey-form-and-css-problem/254234/4 "2019-01-25T17:31:17Z")

</div>

I would honestly suggest you consider using `grid`, if this is the layout you’re looking at. With `flex`, the children of `form` are saying what size and position they prefer – while with `grid`, the layout is slapped on the container, and it’s children are expected to behave.

Here’s what I mean: get rid of the `.left` and `.right`, and change `form`'s CSS to something like:

```auto
form {
  display: grid;
  grid-template-columns: 30% 70%;
}

```

Just those two lines will give you a clean, simple, two-column layout.

---

<div class="post-metadata">

**Author:** ![Theoask](https://sea3.discourse-cdn.com/freecodecamp/user_avatar/forum.freecodecamp.org/theoask/32/63200_2.png) [@Theoask](https://forum.freecodecamp.org/u/Theoask)\
**Post date:** [January 25, 2019, 5:37pm UTC](https://forum.freecodecamp.org/t/project-build-a-survey-form-and-css-problem/254234/5 "2019-01-25T17:37:10Z")

</div>

> [@snowmonkey](#):
>
> grid-template-columns: 30% 70%;

I’ve done that. Check the result please…Still problems…Now the input textboxes are too big in width…

---

<div class="post-metadata">

**Author:** ![snowmonkey](https://sea3.discourse-cdn.com/freecodecamp/user_avatar/forum.freecodecamp.org/snowmonkey/32/241579_2.png) [@snowmonkey](https://forum.freecodecamp.org/u/snowmonkey)\
**Post date:** [January 25, 2019, 5:40pm UTC](https://forum.freecodecamp.org/t/project-build-a-survey-form-and-css-problem/254234/6 "2019-01-25T17:40:50Z")

</div>

So set a width on them:

```auto
input, select{
  width: 60%; /* or 6vw or whatever you prefer */
}

```

---

<div class="post-metadata">

**Author:** ![Theoask](https://sea3.discourse-cdn.com/freecodecamp/user_avatar/forum.freecodecamp.org/theoask/32/63200_2.png) [@Theoask](https://forum.freecodecamp.org/u/Theoask)\
**Post date:** [January 25, 2019, 5:43pm UTC](https://forum.freecodecamp.org/t/project-build-a-survey-form-and-css-problem/254234/7 "2019-01-25T17:43:40Z")

</div>

> [@snowmonkey](#):
>
> input, select{ width: 60%; /\* or 6vw or whatever you prefer \*/ }

Ok thanks its better now.

Still some text and input and checkboxes fields are overlapping the specified width of the elements. Is there a way to prevent them from going to the next line? Maybe there is a margin or “max” parameter to set in CSS ?

---

<div class="post-metadata">

**Author:** ![snowmonkey](https://sea3.discourse-cdn.com/freecodecamp/user_avatar/forum.freecodecamp.org/snowmonkey/32/241579_2.png) [@snowmonkey](https://forum.freecodecamp.org/u/snowmonkey)\
**Post date:** [January 25, 2019, 5:49pm UTC](https://forum.freecodecamp.org/t/project-build-a-survey-form-and-css-problem/254234/8 "2019-01-25T17:49:49Z")

</div>

That’s because of the grid – you will want to group your radio buttons or checkboxes, so the DOM will see them as a single input. Use the `<fieldset>` tag to wrap them as a logical unit. Here’s one set to show you what I mean:

```auto
<p>* How likely is that you would recommend freeCodeCamp to a friend? </p>
<fieldset>
  <label><input type="radio" name="frequency" value="mefinitely" checked >Definitely</label>
 <label><input type="radio" name="frequency" value="maybe" >Maybe</label> 
 <label><input type="radio" name="frequency" value="notsure" >Not sure</label> 
</fieldset>

```

Note that I changed what you had as the label to a `p` tag, and the text with each individual radio **and the radio itself** has been wrapped in the label. Doing this, clicking on the label will select that radio (or checkbox).

Here’s how that might look: [https://codepen.io/snowmonkey/pen/daGzWm?editors=1000](https://codepen.io/snowmonkey/pen/daGzWm?editors=1000)

---

<div class="post-metadata">

**Author:** ![Theoask](https://sea3.discourse-cdn.com/freecodecamp/user_avatar/forum.freecodecamp.org/theoask/32/63200_2.png) [@Theoask](https://forum.freecodecamp.org/u/Theoask)\
**Post date:** [January 25, 2019, 6:02pm UTC](https://forum.freecodecamp.org/t/project-build-a-survey-form-and-css-problem/254234/9 "2019-01-25T18:02:24Z")

</div>

Ok thankjs. What do you think of my end result now?

[https://codepen.io/theoask/pen/KJVamr](https://codepen.io/theoask/pen/KJVamr)

I would like to set specific width for specific types of input forms: example: a different width for checkboxes and radio input forms

Is this the CSS syntax like I wrote?

input [type="checkbox] {

width=20vw;

}

means that this CSS parameter will only apply to input forms of checkbox type (and not to “input” forms in general)?

---

<div class="post-metadata">

**Author:** ![snowmonkey](https://sea3.discourse-cdn.com/freecodecamp/user_avatar/forum.freecodecamp.org/snowmonkey/32/241579_2.png) [@snowmonkey](https://forum.freecodecamp.org/u/snowmonkey)\
**Post date:** [January 25, 2019, 6:03pm UTC](https://forum.freecodecamp.org/t/project-build-a-survey-form-and-css-problem/254234/10 "2019-01-25T18:03:16Z")

</div>

That’s exactly right. A far more targetted selector syntax. Well done!

I’ll check it out, get back to you.

---

<div class="post-metadata">

**Author:** ![snowmonkey](https://sea3.discourse-cdn.com/freecodecamp/user_avatar/forum.freecodecamp.org/snowmonkey/32/241579_2.png) [@snowmonkey](https://forum.freecodecamp.org/u/snowmonkey)\
**Post date:** [January 25, 2019, 6:08pm UTC](https://forum.freecodecamp.org/t/project-build-a-survey-form-and-css-problem/254234/11 "2019-01-25T18:08:22Z")

</div>

So you may have also noticed your button is pushed to the left, and you might want to adjust that. Easily done, within individual components, you can influence its grid positioning:

```auto
button {
  grid-column: 1 / span 2;
  width: ... /* You'll want something here, or it'll be the full width */
  margin: 20px auto; /* this will center the button on the full form */
}

```

---

<div class="post-metadata">

**Author:** ![Theoask](https://sea3.discourse-cdn.com/freecodecamp/user_avatar/forum.freecodecamp.org/theoask/32/63200_2.png) [@Theoask](https://forum.freecodecamp.org/u/Theoask)\
**Post date:** [January 25, 2019, 6:28pm UTC](https://forum.freecodecamp.org/t/project-build-a-survey-form-and-css-problem/254234/12 "2019-01-25T18:28:27Z")

</div>

Thanks; All good now!

---

<div class="post-metadata">

**Author:** ![alexiorodrigues](https://sea3.discourse-cdn.com/freecodecamp/user_avatar/forum.freecodecamp.org/alexiorodrigues/32/108161_2.png) [@alexiorodrigues](https://forum.freecodecamp.org/u/alexiorodrigues)\
**Post date:** [January 25, 2019, 6:29pm UTC](https://forum.freecodecamp.org/t/project-build-a-survey-form-and-css-problem/254234/13 "2019-01-25T18:29:43Z")

</div>

Hello 😃

One thing I suggest you do to better understand the responsive part oft his project is to make the mobile layout first and then get the tablet and desktop sizes with Media queries.

> It is the ideology that mobile design, as the hardest, should be done first. Once the mobile design questions are answered, designing for other devices will be easier. What it boils down to is that, the smallest of the designs will have only the essential features, so right away you have designed the heart of your UX.  
> [https://www.uxpin.com/studio/blog/a-hands-on-guide-to-mobile-first-design/](https://www.uxpin.com/studio/blog/a-hands-on-guide-to-mobile-first-design/)

> However I have no clue how to do that: should I use Flexbox? Or bootstrap?

For the Responsive frontend projects you should avoid bootstrap. Sure It has everything setup, but the main goal here is for you to do it “by hand” to better understand how things work.

You should use use CSS Grid and Flexbox. As @snowmonkey explained, CSS Grid is for 2 dimension layouts (grids) while the Flexbox is better for 1D (direction and alignment of elements). Don’t forget that FCC curriculum covers both of them 😉

If you can’t make an alignment, try to go back to the basics. Check the examples on FCC. Run the example on FCC editor / W3 schools. Slightly modify the familiar territory that is the example and start moving towards your goals. If you still can’t do it feel free to ask around 🙂

> Please give me a hint on how to align properly all the text and input form and text areas to imitate the final result.

Try to examine the example Codepen for this challenge. Each example comes with the html and css. Also don’t forget your browser’s tools to examine the code.

---

<div class="post-metadata">

**Author:** ![alexiorodrigues](https://sea3.discourse-cdn.com/freecodecamp/user_avatar/forum.freecodecamp.org/alexiorodrigues/32/108161_2.png) [@alexiorodrigues](https://forum.freecodecamp.org/u/alexiorodrigues)\
**Post date:** [January 25, 2019, 6:32pm UTC](https://forum.freecodecamp.org/t/project-build-a-survey-form-and-css-problem/254234/14 "2019-01-25T18:32:19Z")

</div>

Don’t forget to search tag properties  
[https://www.w3schools.com/tags/att\_input\_placeholder.asp](https://www.w3schools.com/tags/att_input_placeholder.asp)

---

<div class="post-metadata">

**Author:** ![ILM](https://sea3.discourse-cdn.com/freecodecamp/user_avatar/forum.freecodecamp.org/ilm/32/363239_2.png) [@ILM](https://forum.freecodecamp.org/u/ILM)\
**Post date:** [January 17, 2021, 7:50pm UTC](https://forum.freecodecamp.org/t/project-build-a-survey-form-and-css-problem/254234/15 "2021-01-17T19:50:16Z")

</div>

Closed on January 17, 2021, 7:50pm UTC