CSS, Viewport Height Issue

CSS, Viewport Height Issue
0
#1

Hello, I checked similar threads though I’m still having trouble with the viewport height on my personal portfolio project. I suspect it’s in the html where “navbar” and “welcome section” are in the same div but I’m not sure. Tests out at 11/12 so this viewport thing is the only failure. Could use assistance. Thanks. - Tony

HTML:

Anthony Engel about projects contact

CSS:

#navbar {
position: fixed;
top: 0px; }

#welcome-section {
background: white;
padding: 2px;
text-align: center;
width: 100%;
margin-top: 10;
position: fixed;
}

.about {
margin-left: 500px;
font-family: helvetica;
font-size: 14pt;
color: black;
}

.projects {
margin-left: 11px;
font-family: helvetica;
font-size: 14pt;
color: black;
}

.contact {
margin-left: 11px;
font-family: helvetica;
font-size: 14pt;
color: black;
}

#2

Can you be more specific about what test is failing? Can you direct link to the codepen?

#3

Sorry Jordan, here’s the codepen link: https://codepen.io/Midnightrider/pen/JNNWJG

#4

So the issue you are having relates to your #welcome-section

Compare your codepen to mine of the same project:

notice how on mine the green background is always equal to the height of the window? Even when you resize it?

So (without looking at my codepen code) how do you make it so the height of the welcome section is the height of the viewport?

Try checking out this lesson for help:
https://learn.freecodecamp.org/responsive-web-design/responsive-web-design-principles/make-typography-responsive/

#5

I was playing with viewport widths and heights in the welcome-section yesterday and I had white all the way down the page covering everything. I think I need to move the welcome-section div outside of the navbar div.

#6

Yes, you want your navbar to be a separate entity from your main content. Otherwise when you make the height equal to the viewport, your navbar will fill the whole screen!

#7

  1. You have a bunch of issues with the HTML, use HTML Analyze from the drop-down menu.

  2. You are missing bootstrap, you can add it using the settings button > CSS > Add External Stylesheets/Pens

  3. You are using some old bootstrap classes like .well, it has been replaced in v4 with the card component.

  4. The <center> element is obsolete, don’t use it.

#8

I got it to pass 12/12 though it is ugly (Frankencode). I will try your suggestions to make it look more presentable. Thanks!

#9

Passing the test is far from the only thing that is important, in fact that should be pretty easy.

  1. Using invalid HTML is not OK, using obsolete elements is not OK
Summary 
HTML Inspector warnings:
The classes well (2) title (2) content-section (1) text-center (1) contact-section (1) container (1) row (1) col-md-8 (1) col-md-offset-2 (1) form-horizontal (1) form-group (3) btn (1) btn-default (1) contact-details (1) are used in the HTML but not found in any stylesheet.
The <center> element is obsolete and should not be used.
The <font> element is obsolete and should not be used.
The <p> element cannot be a child of the <h1> element.
The <p> element cannot be a child of the <h1> element.
The <center> element is obsolete and should not be used.
The 'alt' attribute is required for <img> elements.
The 'src' attribute is required for <img> elements.
'<div' is not a valid attribute of the <img> element.
The <font> element is obsolete and should not be used.
The 'alt' attribute is required for <img> elements.
The 'alt' attribute is required for <img> elements.
The 'alt' attribute is required for <img> elements.
The 'alt' attribute is required for <img> elements.
The <font> element is obsolete and should not be used.
The <p> element cannot be a child of the <h1> element.
The <div> element cannot be a child of the <h1> element.
The 'action' attribute is required for <form> elements.
The 'cols' attribute is required for <textarea> elements.
The 'rows' attribute is required for <textarea> elements.
  1. Who uses the <font> element? It was deprecated in HTML 4.01, FCC certainly did not teach you about this.

Do not use this element! Though once normalized in HTML 3.2, it was deprecated in HTML 4.01, at the same time as all elements related to styling only, then obsoleted in HTML5.

  1. Using bootstrap classes without actually including the bootstrap css makes no sense.

I kind of didn’t want to post this, but i am going to anyway:

Honestly, and please don’t get mad, but the use of an old version of bootstrap combined with the fact that you are not even including bootstrap, combined with the odd use of obsolete elements, makes it look like you copied the code from somewhere. If you did not, then I’m sorry, i really don’t mean to offend. I’m just telling you what it makes me think. I don’t want to come off as confrontational, i am only trying to help.

#10

To piggy back on this. I’m working on the front end libraries project and my quote machine passes right now 10/12. Its a blank white page with one <h1> on it and a new quote button. But getting it to pass the tests isn’t “it”. I try to match my look and functionality of the example exactly or go beyond it, besides gotta learn by doing!

#11

When I go to your CodePen project it is failing two tests including the #welcome-section test.
I wonder if there is a bug in the test. It may depend on the user environment.