I completed and passed the tests on Landing Page project. However, all 16 tests seem to pass when I run the test suite script from my Glitch page, but when I copied and pasted the same code on my VS Code Editor and opened the page in browser, it shows 2 errors, i.e. no flexbox and no media query. I have used both of these in my page and the same tests seem to pass if I run the script on my Glitch page, which I find it strange.
The other problem I am not able to solve is when I scroll down the page, all the elements below the navbar overlap the navbar while scrolling since the project requirement is to create a fixed top navbar. I tried various things to resolve this such as adjusting padding, margin and setting height of the element below navbar, but could not find a way to fix this. I also tried the overflow property as well but that does not help. If anyone can help with these two issues, that will be of great help. Here is the link to my Glitch page.
The body has a background-color but the header does not. You are seeing the page’s text pass under the header. Put a background-color on the header to solve it.
Thank you very much for the solution. Wow! that is a simple fix and I spent hours not being able to figure this out. Yes, I added background-color property to the header section and the overlap issue is now resolved. But wondering why I should give the header a background color separately since the header is part of the body anyway. Also could not understand why adding background color to the header fixes the overlap with the elements below it. Well, my test suite script still shows the same errors when I copy and paste the code in my text editor but passes all the tests when I run it on Glitch . The code is exactly the same on both and I have maximized the browser window on both.
When I learned HTML 4.0 & CSS 2.1. I did it offline and lot’s of books from the library. My criteria for which book is not only does it show you how to do something, but the reasoning behind doing it a certain way. That’s where I learned about layers in CSS. I honestly don’t know where to point someone online other than to the spec and struggle through it.
Everything on the page is initially on the same layer ( the document flow ). The background is a layer behind the content. When you use positioning other than static the element goes on a layer above the content ( taken out of the document flow ). You can create more layers with positioning plus the z-index, but I usually figure out how to do most things with just those three layers.
This topic was automatically closed 182 days after the last reply. New replies are no longer allowed.