Need help/feedback with my Landing Page project

Hi!

So, I’m almost finished with my landing page. Flexbox gave me some headaches but I think i understand it better now.

However, I’m still facing a few problems that I honestly can’t see how I could solve.

The first one (and forgive me if my explanation isn’t as clear as I wanted it to be): For some reson, my fixed header covers the top of my body, so the top of the body element is hidden behind the header. For apparently the same reason, when I click on one of the items on the navbar, it correctly sends me to the designated section, however, the header also covers the “spot” that should be at the top, which means the navigation doesn’t look/feel smooth as it should.

The second problem (and I wouldn’t be surprised if ironically it turns out to be the solution for the first problem) is that I simply don’t know where I would use a media query, as it’s one of the requisites/user stories for this challenge.

I wrote the code on VS Code and pasted on Codepen (but I’ve hosted the image I’ve made to be the logo on my github, and I also wanted to know if I can host my projects there, instead of Codepen).

Hi @RamiLT, let’s start from the beginning

  • Keep the test script when forking the pen (<script src="https://cdn.freecodecamp.org/testable-projects-fcc/v1/bundle.js"></script>)
    The test script, with all tests passing, should be included when you submit your projects.
    Your page passes 14/16 user stories. Click the red button to see which test(s) are failing and text to help you correct the issue.
    Be sure and read more than just the first line of the failing message. The ability to read and comprehend error messages is a skill you’ll need to acquire as a developer. Ask questions on what you don’t understand.
  • Run your HTML code through the W3C validator.
    There are HTML syntax/coding errors you should be aware of and address.

This is something everyone encounters. Since your header is fixed and occupies space when clicking a link and going to that section of course it will be covered by the nav. Maybe adding some padding would help.

This isn’t the only user story you are failing.
When a test fails click the red button to see which test(s) are failing and text to help you correct the issue.
Be sure and read more than just the first line of the failing message. The ability to read and comprehend error messages is a skill you’ll need to acquire as a developer. Ask questions on what you don’t understand.

For responsiveness, start by styling for a narrow view port first. Narrow your browser as far as it will go and style the page so it looks good at that narrow width. Then gradually widen your browser and use CSS media query break points to adjust the style for wider view ports if needed.

You can write your code wherever you want. The only requirement is that when you submit the project it must be a link to your live code. So yes, you can host your project on GitHub. Look into GitHub pages.
On a side note, when using codepen it provides the boilerplate for you. It only expects the code you’d put within the body element in the HTML editor. (No need to include the body tags). For anything you want to add to the <head> element click on the ‘Settings’ button, then HTML and add it into the ‘Stuff for <head>’ box.

So, i think I was able to solve the responsiveness issue (which also made me think that it’s probably wiser to adopt a mobile-first approach from now on).

I ran the HTML code through the validator and there’s no errors. The page passes the test with 16/16.

However, I was still unable to find a way to solve the navbar issue. It still covers the top of my page and the headings when you jump to them by clicking on the links in the navbar. I’m at a loss here.

Edit: I went with 320px as the smallest size for the viewport, as my research showed that this is the smallest size I should consider.

Hi @RamiLT
I have two suggestions to solve your issue.

  1. give your header a z-index of let’s say 999, so it always stays on top.
#header {z-index:999;}
  1. Your whole information is in main. So just give your main, a position of relative and bring it down by top 5rems or so.
main {
position: relative;
top: 5rem;
}

That should solve your navbar problems. :slight_smile:
Happy coding!

1 Like

Ah! Thanks a lot for that! This (suggestion #2) solved the issue! I was also able to solve the other issue (with the positioning of the header when you jump to a fragment) by adding scroll-margin-top of 5rem to all the 3 targets so when the page jumps to one of them, they don’t get totally or partially covered by the header anymore.

This topic was automatically closed 182 days after the last reply. New replies are no longer allowed.