Me again! Survey Form Help Please with spacing/margins?

Project Feedback
#1

Hello,
Thanks to your help here on the forum I did manage to get all the tests to pass.
But I can’t hand it in as the spacing is all weird on the page…my eyes are going weird just looking at all so much so just wondering if anyone can give me an idea of what I can be looking at to harmonise the text/questions on the page.

You’ll be able to see what I mean by viewing the codepen link…
https://codepen.io/dotdashdon/pen/NWRyVMP

  1. Why is there a good gap between Name and the input box but this does not appear for the Email and its input box?

I can live with the spacing of the questions but I would like less space between the questions and answer-options. I am not sure how I have even managed to do it.

If you can help in any small or large way , then I would much appreciate it.

Many thanks

Dotdash

#2

You are missing the closing tag for label.

1 Like
#3

It is because of the way you used label here

        <label class="name" id="name-label">Name</label><input  type="text" placeholder="enter your name" id="name" required>

You assigned a margin of 100px to the label.

But you wrote it differently here

  <label class="email" id="email-label">Email<input type="email" placeholder="enter your email" id="email" required>

So that is why they look and behave differently.

1 Like
#4

The first thing is that you have to get rid of the html errors. Html errors can affect how your styles work sometimes. So I would run my code through the html validator and fix those errors.(You can ignore the messages about doctype, html tags) I would also get in the habit of formatting your code so you can find issues faster. Codepen has a format html tool
Screen Shot 2021-01-17 at 10.36.51 AM

Once you fix those issues, and consistently write the labels and inputs all of the same way, then you can decrease the margins to create less space between elements.

Hope that helps!

1 Like
#5

Thank you so much for reading and replying.

#6

Thank you. That’s amazing and a massive help. And yes I will run the code through too.

Of course, now I am looking at it on my laptop, it is all looking very different anyhow so guess I should put something in the code to address the responsive media issue.
Thanks again for your help.

#7

I think once you clean up the errors in your html and css then you could look into organizing all of the elements in your form a little bit better.

I would personally use flexbox on the form itself and then use flex-direction column.

And then I would go through each of the elements and style them to my liking.

But I think grouping them all in one place will look better because right it is all over the page.

If you choose to go down that route you could review the flexbox lessons in FCC or your could read more about flexbox on css tricks.

#8

Thank you…yes I realise it is all over the page even though I don’t know exactly what I am looking at…there are an embarrassing number of errors. I did manage to work through the errors for The Tribute Page but not so sure I can with this.
For example, it says with this line 1. <div class="text"> ↩ Error: No space between attributes. There is not much I can do about this as if i remove it then the page fails one of 17 tests…if i add or remove spaces then it makes no difference to the validator and still fails…
I had very briefly read about Flexbox as its touched upon in the code camp curriculum but havent recalled it so will be good to look again. I guess its all an iterative process.
Will just keep going …!
Thanks again for your help.

#9

You have syntax errors before that;

  1. This <h1 id=title> is not the correct way to set an attribute
  2. This <img id="image" src="https://miro.medium.com/max/3840/1*12ntdOERAn5lUjGRIFJ2ug.jpeg" width="600" height="300" alt="image of Audrey Heburn drinking a cup of tea> is not the correct way to set the alt attribute. (Something’s missing)

There are a lot of typo’s in your code. As a suggestion switch the Syntax Highlighting on Codepen to help catch errors. Go to your Codepen profile settings (not the setting for the pen, but for your profile). Switch the Syntax Highlighting to Oceanic Dark and save the setting. Go back to the pen and make sure your new setting is working. The code highlighting will be using different colors. Errors will now be marked in red.

After correcting typo’s then run your HTML code through the W3C validator and correct any syntax errors.

Edit: To help you visualize how you have your elements set up, temporarily add the following to the top of the CSS editor;

* {
  border: solid 1px red;
}
2 Likes
#10

Also, what will help in the future is to run your code through the validator as you build the project.

If you regularly check for errors as you code then it will be more manageable to fix and easier to spot them.

Just take it one step at a time.

2 Likes
#11

Yes this is the way I need to approach it in future. I think I will just start this page again as that will hopefully be better than trying to go through the 70+ errors on the validator. Thanks again so much for you help.

#12

Thank you so much. I really did not know about this possibility. Will seek to take your advice and follow up on it. Thanks again Roma!

1 Like