Placement and size problems in survey form

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

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:

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

1 Like

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

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.

Hi C Lewis

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

1 Like

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!