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
The Final Official result I’m supposed to do: https://codepen.io/freeCodeCamp/full/VPaoNP
2 Likes
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:
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).
4 Likes
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.
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:
form {
display: grid;
grid-template-columns: 30% 70%;
}
Just those two lines will give you a clean, simple, two-column layout.
I’ve done that. Check the result please…Still problems…Now the input textboxes are too big in width…
So set a width on them:
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 ?
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:
<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
Ok thankjs. What do you think of my end result now?
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)?
That’s exactly right. A far more targetted selector syntax. Well done!
I’ll check it out, get back to you.
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:
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 */
}
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/
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.
1 Like