Survey Form - Height problem

I just finished Survey Form Project , here’s the link:
I just copied the look of FCC’s example. I didn’t copy the code, just looked at the website and coded it myself, and it was really interesting and I learned a lot of things.
But I have one problem and I can’t find a solution for this.
When you open the site and scroll down there isn’t background color, I think this is about #main’s height property. I set it to 100% and if you scroll there isn’t background color. I tried setting it to 150%, it worked for me but I don’t think it will work on all resolutions.
So if you can help me, please leave a comment :slight_smile:

1 Like

Hey Luka,

Looking at the pen I have some suggestions:

1: There is no way to comment out only a line in css (like the // for html) so you’ll have to use /* to start the comment, then */ to finish it.

2: Something that really helped me when I started, and is essential to webdev, is the devtools feature. To bring them up in the chrome browser is ctrl+shift+i. It can do things like let you hover over the page and show you each element, including the one that is going over your background border. It also lets you try your page on different resolutions to check responsiveness (side note: your input fields could use a little responsiveness when you have time.)

3: Using a % will set it to a percentage of the element’s direct parent, and not necessarily the parent above that. Other percentage tricks I like are vh (view window height) and vw (view window width).

I hope those can help you out. To your original question: it looks like your #main height is 339px and your tabela height is 975px. Other things like text area and buttons can force the height of your element beyond what you write into it, so play around with it a little and see if you can get it to the height you’re looking for.

Happy coding!

1 Like

Here’s a link to the pen I did some edits on. I took out the position: absolutes, and put in some auto margins instead to keep everything centered. The text boxes have a responsive width, but also a max-width so they don’t get crazy long.

One other notorious culprit for height and widths you don’t mean to have is an input field (or several) pushing its container down due to its own line height+padding+margins

1 Like

@xLuka03 You said it. Remove the height from the #main element. It is not necessary to add height to certain elements it can cause problems. You will learn where to add height the more experience you get with CSS.

1 Like

Thank you :slight_smile: I really didn’t know about comments, // worked for me in css xD or I just though it did :stuck_out_tongue:

Thank you for that, I will definitely start using vw and vh more, seems pretty good for responsive design :slight_smile: Is it okay with you if I add the changes you’ve made to my original project?

Of course, be my guest. Glad I could help

1 Like

Hi @xLuka03, just some things regarding codepen;

  • codepen only expects the code you’d put within the <body> </body> tags in HTML. (No need to include the body tags). For anything you want to add to the <head> click on the ‘Settings’ button and add it into the ‘Stuff for <head>’ box.
    • The link to your font would go in the box labeled ‘Stuff for <head>’
  • codepen provides validators for HTML, CSS and JS. Click on the down arrow in the upper right of each section and then click on the respective ‘Analyze’ link.
    • The reason you were thinking // was commenting out the line in CSS is because CSS reads the property as //overflow and since that isn’t a valid property it ignores it. As mentioned, use <!-- and --> to comment out text in HTML and CSS.

When you use Dev Tools (open with cmd+option+i on Mac, control+shift+i on Linux and Windoze) you’ll see little checkboxes next to your styles that you can uncheck to see what effect it has on your page. In order to make it permanent you’ll have to edit your CSS.

Happy coding!

Thanks for info, I coded in Sublime so I just copied from there and pasted to codepen :smiley:

I code in Brackets. :slightly_smiling_face:
Just cut from between the body tags and paste. And cut anything from head and paste it into the Settings. (But you know that)

1 Like