Help with my landing page, please

Here’s my link: [https://codepen.io/lvcoulter/pen/ErLpMo]
And here are my issues:

Tests

  • Fails navbar test - can’t figure out why.
  • Fails media query test - it very obviously has media queries in it.

Other stuff

  • can’t seem to get the menu items in a row. I think it has to do with ul not being recognized as a nested element. See line 117 css for notes. And while you’re working on that problem (THANKS!) there’s a similar issue on line 72 css
  • I really don’t want my main body to scroll under the fixed navbar. When I click the navbar menu items, it takes me to the right place, but you can tell the top of it is still under the header bar because only part of the words are showing. I tried setting a margin-top to the main section (line 24 css), but that didn’t seem to do anything.

Thanks for any help you can provide. I realize the line numbers will move, so I added comments in the vicinity.

CSS doesn’t support nesting. When CSS sees something it doesn’t understand it simply ignores it. Either flatten your CSS or switch to SCSS (gear symbol left to CSS).

I looked at your code and found the problem for /@Media
can you guess? Look at the rule above your at media rule…
Do you notice something wrong with it? I did.

It passes all the tests, congrats!

I’m not really sure where you mean? I have nine instances of @media. Could you tell me which element to narrow my hunt down?

Thank you. The SCSS fixed the nav menu issue and the @med
Now I just need to get it to pass the navbar test.

It still doesn’t pass the navbar test for me? :frowning_face:

Did you followed what @jenovs asked above?

I did, yes.

I’m getting this error for the test:

Invalid attempt to spread non-iterable instance
TypeError: Invalid attempt to spread non-iterable instance
at e.exports (https://cdn.freecodecamp.org/testable-projects-fcc/v1/bundle.js:154:129639)
at e.exports (https://cdn.freecodecamp.org/testable-projects-fcc/v1/bundle.js:39:82927)
at Anonymous function (https://cdn.freecodecamp.org/testable-projects-fcc/v1/bundle.js:154:53707)
at c (https://cdn.freecodecamp.org/testable-projects-fcc/v1/bundle.js:159:31600)
at f.prototype.run (https://cdn.freecodecamp.org/testable-projects-fcc/v1/bundle.js:159:31544)
at m.prototype.runTest (https://cdn.freecodecamp.org/testable-projects-fcc/v1/bundle.js:159:37112)
at Anonymous function (https://cdn.freecodecamp.org/testable-projects-fcc/v1/bundle.js:159:37766)
at s (https://cdn.freecodecamp.org/testable-projects-fcc/v1/bundle.js:159:36409)
at Anonymous function (https://cdn.freecodecamp.org/testable-projects-fcc/v1/bundle.js:159:36495)
at o (https://cdn.freecodecamp.org/testable-projects-fcc/v1/bundle.js:159:35894)

I’m still searching for an answer on the internet. I’d appreciate any direction.

Goto settings, change your css preprocessor from none to scss!

I don’t know if you found it… the rule above the media rule is missing it"s closing “}”.

I did! It is on SCSS and it’s still getting the error on the navbar. I saved and next to the CSS header it added a red Compiled. Still doesn’t pass.

CSS%20settings

All test pass for me. Try to reload the page with Ctrl + F5

It was actually a nested rule, so it doesn’t take a closing tag right before it. That’s why changing to SCSS fixed it. All my media inquiries are nested. In regular CSS, it definitely wouldn’t pass without closing the previous one. Thank you so much for looking and replying. I’ve learned a lot from this thread already!

Exactly, try hard reload or change your browser

Thank you @IAmRC1 and @jenovs. It seems the issue was that I was working in Edge. It won’t pass in Edge but it will pass in Chrome. Chrome is my preferred, but I’m trying to give Edge a chance. Strike 1!

i have to look into what scss is.

For FCC, prefer chrome, there are some challenges that won’t get pass in chrome as well, so you will have to get firefox for that

Even Microsoft is not giving Edge a chance anymore: https://blogs.windows.com/windowsexperience/2018/12/06/microsoft-edge-making-the-web-better-through-more-open-source-collaboration/

@tammt - you and me both! Someone mentioned it on this thread. I had read that CSS didn’t do nesting, but saw that the example landing page did. I never figured it was something that we hadn’t learned.
@IAmRC1 and @jenovs - those are both extremely useful bits of info. Thanks!