I have a couple questions regarding some failing tests on my product landing page. #13 navbar at top of viewport and #14 media query. Those are the only two giving me problems. For the media query, I tried this:
<h3>This information was taken from
< a id="product-link"
href="https://www.cuisinart.com/shopping/appliances/food_processors/" target=_blank> Cuisinart</a>
</h3>
but it didn’t work. Even the copyright thing I included didn’t work. What’s the proper way to insert the media query for the product landing page? And how do I move the navbar to the top of the viewport?
I’ve edited your post for readability. When you enter a code block into a forum post, please precede it with a separate line of three backticks and follow it with a separate line of three backticks to make it easier to read.
You can also use the “preformatted text” tool in the editor (</>) to add backticks around text.
The navbar should always be at the top of the viewport. #header or one of its children should be at the top of the viewport even after scrolling : expected 492 to be close to 0 +/- 15
AssertionError: #header or one of its children should be at the top of the viewport even after scrolling : expected 492 to be close to 0 +/- 15
This means that the navbar needs to be “sticky”, to be “pinned” to the top. As you scroll, it stays at the top. Presumably that means that it should be spread across the top and stay there as you scroll under it.
My product landing page should have at least one media query.
No media queries detected : expected false to be true
AssertionError: No media queries detected : expected false to be true
You don’t have a media query, which is a CSS thing. You should have learned about them here.
@kevinSmith I got the media query figured out. I am still not understanding the navbar thing though. I also forgot to mention that the video I included is not showing up and am wondering why that is the case.
For the navbar, do some googling. That is a very, very important skill for a dev. I do it all the time.
For the video, yeah, youtube can be a little odd. Go to the youtube video you want, press Share and then Embed - it will give you working iframe code and then you can adjust it from there.
@kevinSmith I have all my tests passing now. The only problems I have now are the logo overlapping with text as I scroll down and the content of the page has moved up. I’m not sure how to fix that. Here is the updated version.
Right. I think what you want there is the standard sticky, opaque header, like the one on this FCC page - you can scroll down, but the header stays at the top, and it is opaque so as the content scrolls under it the content isn’t seen under the header.
So, with regards to the logo, that can be either part of the header or part of the content. If you make it part of the header. If it is part of the header, it should probably be a little smaller. Usually the header is going to be a different color than the body background (even if just a little) and or have a shadow so it is clear that it is separate and creates the appearance that the body is moving below it.
Try giving your header a background colour (even if it matches the rest of the page) so it doesn’t look ‘transparent’.
I would then suggest wrapping everything that is below it (excluding your footer) in a main element. You’ll then need to add some spacing (margin/padding) at the top of your main element so it begins below your header. Otherwise, add it to your first h2… But just a heads up, you’ve got an empty div above that, which may be unintentional.
