# Placement and size problems in survey form

**URL:** <https://group.classcentral.com/t/placement-and-size-problems-in-survey-form/8838>\
**Category:** Web Development Bootcamp\
**Created:** [September 10, 2021, 7:20pm UTC](https://group.classcentral.com/t/placement-and-size-problems-in-survey-form/8838 "2021-09-10T19:20:12Z")\
**Posts on this page:** 6\
**Page:** 1

<div class="post-metadata">

**Author:** ![chienhan2597368](https://avatars.discourse-cdn.com/v4/letter/c/d07c76/32.png) [@chienhan2597368](https://group.classcentral.com/u/chienhan2597368)\
**Post date:** [September 10, 2021, 7:20pm UTC](https://group.classcentral.com/t/placement-and-size-problems-in-survey-form/8838/1 "2021-09-10T19:20:12Z")

</div>

Hi,

I am trying to finish my second project and really get frustrated in placing and sizing elements in it.  
https://codepen.io/Chienhan/embed/preview/YzQWVrB?default-tabs=html%2Cresult&height=300&host=https%3A%2F%2Fcodepen.io&slug-hash=YzQWVrB  
Sounds like too many factors are interweaving. I don’t know if there is any best practice to plan the layout.  
Below are my questions:

1. My form element is too big in the page, how do I adjust its size?
2. How do I adjust either left or right indent of elements in the form?  
I use padding-left: to adjust the distance between elements like name/age and the form border. However, if I change the size of the padding, it will change the size of the whole form.
3. How do I change the distance between label and input?
4. How do I change the distance between checkboxes(same for buttons)?  
5.Why is the size of select box not the same as Age/Name input box?
5. Why doesn’t textarea show my code?
6. My submit element does not show in the page. If I put the code before the textarea, it will show. Why?

Sorry for so many questions. Thanks for your patience to help me out!

BR  
Chien

---

<div class="post-metadata">

**Author:** ![jayj](https://sea2.discourse-cdn.com/flex016/user_avatar/group.classcentral.com/jayj/32/1909_2.png) [@jayj](https://group.classcentral.com/u/jayj)\
**Post date:** [September 10, 2021, 11:04pm UTC](https://group.classcentral.com/t/placement-and-size-problems-in-survey-form/8838/2 "2021-09-10T23:04:36Z")

</div>

Hi

In regards to 5/6, there was a missing bracket at the end of this tag:

```auto
        <textarea
         class="textarea"
         name="comments" >

```

Should be ok after that:

 ![image](https://us1.discourse-cdn.com/flex016/uploads/ccstudygroup/original/2X/1/18ad41138281d3ef09fdd572160b9f42486f3807.png)

(It’s just an annoying syntax error, I know haha)

---

<div class="post-metadata">

**Author:** ![chienhan2597368](https://avatars.discourse-cdn.com/v4/letter/c/d07c76/32.png) [@chienhan2597368](https://group.classcentral.com/u/chienhan2597368)\
**Post date:** [September 13, 2021, 1:13am UTC](https://group.classcentral.com/t/placement-and-size-problems-in-survey-form/8838/3 "2021-09-13T01:13:14Z")

</div>

Hi Jayi

Thanks for pointing out the error. I add the bracket and 5/6 are fixed.

I also add margin:10px; in the label to solve 3/4.

---

<div class="post-metadata">

**Author:** ![casserole27](https://sea2.discourse-cdn.com/flex016/user_avatar/group.classcentral.com/casserole27/32/1279_2.png) [@casserole27](https://group.classcentral.com/u/casserole27)\
**Post date:** [September 18, 2021, 12:52pm UTC](https://group.classcentral.com/t/placement-and-size-problems-in-survey-form/8838/4 "2021-09-18T12:52:11Z")

</div>

Hi Chien,

1. Have you tried styling the form element?

For the other questions, I would really recommend playing with margin/padding/border in the DevTools of your browser, or playing with margin and padding values in the Style Editor of DevTools. I think it really really helps to see these happen in real time, rather than trying to edit code and switching back and forth.

---

<div class="post-metadata">

**Author:** ![chienhan2597368](https://avatars.discourse-cdn.com/v4/letter/c/d07c76/32.png) [@chienhan2597368](https://group.classcentral.com/u/chienhan2597368)\
**Post date:** [September 18, 2021, 8:12pm UTC](https://group.classcentral.com/t/placement-and-size-problems-in-survey-form/8838/5 "2021-09-18T20:12:16Z")

</div>

Hi C Lewis

Thanks for advice. DevTools sounds good, I will find a document to see how to use it.

---

<div class="post-metadata">

**Author:** ![casserole27](https://sea2.discourse-cdn.com/flex016/user_avatar/group.classcentral.com/casserole27/32/1279_2.png) [@casserole27](https://group.classcentral.com/u/casserole27)\
**Post date:** [September 20, 2021, 8:36pm UTC](https://group.classcentral.com/t/placement-and-size-problems-in-survey-form/8838/6 "2021-09-20T20:36:15Z")

</div>

To get to DevTools, right click inside your browser and select “inspect.” I have circled the three things you will need to select to see margin/border/padding. Using that box with the colors, you can change the values on margin/border/padding on different elements to see how they behave. You can use the pointer (right next to “Inspector”) to select different elements to see their values. Hope this helps!

 ![DEVTOOLS](https://us1.discourse-cdn.com/flex016/uploads/ccstudygroup/original/2X/5/572be16e628d4b0f62470eb335bed76ab9fd5816.jpeg)