Personal Portfolio Failing tests

1

I have no clue why this pen is failing the tests.

Everything that it apparently is failing, works visually on full page view and in the browser for Visual Studio Code.

  1. My portfolio should have a Welcome section with an id of “welcome-section” - Pen has this
  2. The welcome section should have an h1 element that contains text.- Pen has this
  3. The projects section should contain at least one element with a class of “project-tile” to hold a project. - Pen has four of them
    Layout:
  4. My portfolio should have at least one media query. Pen does have a media query (that worked fine on a previous project)
  5. The height of the welcome section should be equal to the height of the viewport. - Pen does this.
  6. The navbar should always be at the top of the viewport. - The nav-bar does stay at the top while scrolling.

I do not see what is wrong

1 Like
2

User Story #1: My portfolio should have a welcome section with an id of welcome-section

needs a hyphen, not an underscore.

User Story #4: The projects section should contain at least one element with a class of project-tile to hold a project.

tile, not title.

You’ve defined class three separate times in one div here:
<div class="project" class="project-img" class="project-tile">

3

After that you need to add an @media function, I used:

@media only screen and (max-width: 600px) {
  body {
    background-color: lightblue;
  }
}

you could try something similar, once those things are fixed, anchor your navbar to the top (I used bootstrap on mine) with:

class="navbar navbar-default navbar-fixed-top"

but you can use flex if you wish. After you address these things it should pass.

4

Hi @Tzadi_James

Your media query hates how you’ve parsed it. You don’t need to use the commas. Take them out and the media query passes.

Also, for your navbar, you have for some reason defined the top position at 1em - which is obviously not the top of the screen. Also bear in mind that an EM is a relative length and doesn’t make a ton of sense in this instance (in my opinion).

The rest of the errors are related to spelling mistakes in your code. Something you’ll need to be ultra aware of going forward.

5

Actually, if he goes into ‘settings’ and sets the CSS preprocessor to SCSS, he’ll pass the media query test. However, he probably should be doing things the pure CSS way at this point if he isn’t aware of setting the preprocessor.

1 Like
6

Fair point but I’m of the opinion that anything that isn’t “taught” by FCC up the the point of the assessments is off-limits in terms of recommendations/fixes. It just feels like opening a massive can of worms to me.

This set of issues is probably a good example. Our friend is struggling to fix the basics in the code without us adding an extra level of sophistication/depth to the problem.

1 Like
7

Thank you.
I mistakenly thought I had to separate the items in the media query with commas.
I forgot to delete the top position in the nav-bar; I was trying to figure out another issue the page had and spaced it out.
I am still trying to figure out which units to use so that the work I do is flexible for all the varying display platforms, a tutorial I watched the guy said to use em, rem and percentages for everything.
Thank you once again I will fix the things you mentioned.

8

Thank you willjw3,
The last project wanted everything with underscores, so I thought that was how all the declarations were supposed to be.

9

Thank you
@willjw3, @Ascii & @Johnny2136
I real appreciate the assistance.
This can get daunting with all the little things that make big problems (hyphen vs underscore, a comma vs a semi-colon or colon, do you put a space after a colon or not, etc…).
It would also be nice to know how all of the different size declarations relate to each other and when/where to use which one. I guess I’ll figure that out as I go (oh the wasted hours to come).

2 Likes
10

Thanks for your guidance

11

In this challenge, i can’t pass item 3rd of #layout, give me for help…