Placement and size problems in survey form

Web Development Bootcamp
1

Hi,

I am trying to finish my second project and really get frustrated in placing and sizing elements in it.

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

1 Like
2

Hi

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

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

Should be ok after that:

image
image700×267 36 KB

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

1 Like
3

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.

1 Like
4

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.

5

Hi C Lewis

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

1 Like
6

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
DEVTOOLS1920×1080 167 KB

1 Like