Stuck on Product landing page/ media query, nav-link, navbar and submit element

HTML-CSS
1

I am stuck on the Landing page project. After many hours of staring at my computer, I am at a lost. any help would be much appreciated!!!

I am not passing the .nav-link button test even though my page takes me to the section of the page it corresponds to when the nav buttons are clicked on. The submit element part of the test I am not passing even though I have done the research and added in the link. My media query is not being identified and finally the navbar is not being recognized at the top of my page in my header.

Please let me know what I am doing wrong.

Thanks in Advance!

2

The most important skill for a programmer is to learn read error messages.

5. Each .nav-link element should have an href attribute.
Does li can have attribute href? (hint: https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes)

12. The #email input should have a name attribute (does it?)

1. #header or one of its children should be at the top of the viewport even after scrolling.
I think they expect header to be fixed

2. No media queries detected
You can’t do nesting in CSS

1 Like
3

I see now. I will definetly pay more attention to the error messages! I am very new to coding. This is a skill I have only been learning for a month now. Thank you for your patience and clearing up these issues for me. I’m still a little confused about media queries and how to add them to my page but I understand that I can’t nest them with other elements in CSS.

Thanks again for your help!

4

You can’t nest anything in CSS (except for media queries :grinning:) . That’s one of the reasons to use SASS/SCSS.

You add media queries by wrapping CSS selectors in

@media (max-width: 500px) { 
  regular CSS here
 }

This media query will work on screens up to 500px;

1 Like
5

:joy::joy::joy::joy:
Ill get it down one of these days! Thank you! That makes a lot more sense to me now!!!
I have passed all my test!
One last question.
Just to make my page look a little more like the example given in the instructions, can you look at my code and explain where I would need to add the margin so that when I scroll my content will not go to the very top of my page? I tried adding margin-bottom: 20px to the header element and my container class but I was unsuccessful.

6

You could add
background-color: #EFEFEF;
to header

1 Like
7

Wow! That worked perfectly! Do you mind explaining why it took changing the color versus changing the padding to get that to work?
I really appreciate your time!

8

It’s a bit advanced topic, but very simplified version would be: Elements don’t have background color by default (they’re transparent). When you use fixed position, the element is put on the top of other elements (and when you scroll they sort of go “under” the fixed element).

You could google “CSS stacking context” to learn more about it, but as I said it’s a bit advanced topic.

1 Like