# Survey page needs a little help

**URL:** <https://forum.freecodecamp.org/t/survey-page-needs-a-little-help/438661>\
**Category:** I Built This\
**Created:** [January 3, 2021, 8:33pm UTC](https://forum.freecodecamp.org/t/survey-page-needs-a-little-help/438661 "2021-01-03T20:33:37Z")\
**Posts on this page:** 6\
**Page:** 1

<div class="post-metadata">

**Author:** ![jojo4545](https://sea3.discourse-cdn.com/freecodecamp/user_avatar/forum.freecodecamp.org/jojo4545/32/193821_2.png) [@jojo4545](https://forum.freecodecamp.org/u/jojo4545)\
**Post date:** [January 3, 2021, 8:33pm UTC](https://forum.freecodecamp.org/t/survey-page-needs-a-little-help/438661/1 "2021-01-03T20:33:38Z")

</div>

[https://codepen.io/jordancrowl/pen/PoGJxKQ?editors=1100](https://codepen.io/jordancrowl/pen/PoGJxKQ?editors=1100)

Hi! I gotta be honest. I’ve been struggling a bit with this survey page!

Questions:

How do I format the select box so its the same size as the other boxes?

How do I align the radio buttons in a column?

How do I get the label text to the right of my checkboxes?

How do I get the cursor in the additional comments box to be at the top left of the textarea box?

Annnnnd: anything else you might add or suggest with my coding so far in this project.

I think I definitely need to revisit flexbox. So any other additional resources you may suggest are appreciated.

Thanks for your help!

---

<div class="post-metadata">

**Author:** ![bbsmooth](https://sea3.discourse-cdn.com/freecodecamp/user_avatar/forum.freecodecamp.org/bbsmooth/32/203556_2.png) [@bbsmooth](https://forum.freecodecamp.org/u/bbsmooth)\
**Post date:** [January 3, 2021, 9:11pm UTC](https://forum.freecodecamp.org/t/survey-page-needs-a-little-help/438661/2 "2021-01-03T21:11:42Z")

</div>

> [@jojo4545](#):
>
> How do I format the select box so its the same size as the other boxes?

Look at the CSS box-sizing property:

> **[box-sizing - CSS: Cascading Style Sheets | MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/box-sizing)**
>
> The box-sizing CSS property sets how the total width and height of an element is calculated.

> [@jojo4545](#):
>
> How do I align the radio buttons in a column?

You’ll most likely need to wrap each label/input combo in a div and then you can use display: flex to align those divs in a single column.

> [@jojo4545](#):
>
> How do I get the label text to the right of my checkboxes?

In your HTML place the input tag before the label tag

> [@jojo4545](#):
>
> How do I get the cursor in the additional comments box to be at the top left of the textarea box?

Use a `<textarea>` instead of an `<input>`

Other suggestions:

- Don’t use `<br>` to create vertical spacing. Use CSS.
- For your radio button/check box groupings, take a look at the `<fieldset>` and `<legend>` tags:  
[WebAIM: Creating Accessible Forms - Accessible Form Controls](https://webaim.org/techniques/forms/controls#checkbox)
- `<label>`s need a for attribute to work correctly (since you are not wrapping the input with them)

---

<div class="post-metadata">

**Author:** ![jojo4545](https://sea3.discourse-cdn.com/freecodecamp/user_avatar/forum.freecodecamp.org/jojo4545/32/193821_2.png) [@jojo4545](https://forum.freecodecamp.org/u/jojo4545)\
**Post date:** [January 4, 2021, 4:14am UTC](https://forum.freecodecamp.org/t/survey-page-needs-a-little-help/438661/3 "2021-01-04T04:14:08Z")

</div>

Thank you for your help @bbsmooth! After a breather, and your message, I took a fresh look at everything and I finally got it looking like a decent survey from the 90s! So satisfying. Thank you again.

---

<div class="post-metadata">

**Author:** ![Roma](https://sea3.discourse-cdn.com/freecodecamp/user_avatar/forum.freecodecamp.org/roma/32/112899_2.png) [@Roma](https://forum.freecodecamp.org/u/Roma)\
**Post date:** [January 4, 2021, 4:24pm UTC](https://forum.freecodecamp.org/t/survey-page-needs-a-little-help/438661/4 "2021-01-04T16:24:21Z")

</div>

Your form is looking good @jojo4545 and I know you didn’t ask for feedback but there are a couple of things you can revisit;

- Run your HTML code through the [W3C validator](https://validator.w3.org/#validate_by_input)
- User’s should be able to click on the label to toggle a selection, not just the radio button / checkbox
- Change the cursor to a pointer when hovering over the submit button
- Make your page responsive. Remember, the _R_ in _RWD_ stands for _Responsive_
  - There’s a horizontal scrollbar on smaller screens

When doing your styling, start with the narrow view (mobile) design first and then work your way wider, adding breakpoints where needed for the wider design.

---

<div class="post-metadata">

**Author:** ![jojo4545](https://sea3.discourse-cdn.com/freecodecamp/user_avatar/forum.freecodecamp.org/jojo4545/32/193821_2.png) [@jojo4545](https://forum.freecodecamp.org/u/jojo4545)\
**Post date:** [January 4, 2021, 7:41pm UTC](https://forum.freecodecamp.org/t/survey-page-needs-a-little-help/438661/5 "2021-01-04T19:41:29Z")

</div>

Thanks @Roma! I made some adjustments. I have become very familiar with the width property now. I was having so many issues aligning items and going too crazy with margins and divs. I think I’ve sorted some of it out. My mobile view on codepen doesn’t look quite right though. The words are going out of the div.

---

<div class="post-metadata">

**Author:** ![system](https://global.discourse-cdn.com/freecodecamp/original/3X/e/1/e1c433102e34b46dfaa3e15d13ab9a514b127078.svg) [@system](https://forum.freecodecamp.org/u/system)\
**Post date:** [July 6, 2021, 7:41am UTC](https://forum.freecodecamp.org/t/survey-page-needs-a-little-help/438661/6 "2021-07-06T07:41:32Z")

</div>

Closed on July 6, 2021, 7:41am UTC

This topic was automatically closed 182 days after the last reply. New replies are no longer allowed.