Product Landing Page project stuck @15/16

HTML-CSS
1

Hi, I wonder if anyone can help or advise a complete and struggling noob to coding?

I have been wasting so much time on 4 minor issues with the Product Landing Page assignment. The first issue: 1. The navbar should always be at the top of the viewport. error, and the second issue 2. Whenever I maximise the web page the .logo property stretches too, and lastly 3. The nav bar I am unable to make a space between the list items and I want to place that navbar to the right side of the web page. I can’t believe this is happening to me, it maybe a simple resolution, but it’s driving me insane (jokes). I appreciate for your time and patience. And 4. finally whenever I run the FCC Test Suite in Codepen, I get “#mocha div missing, add it to your document” and it does not give any results, however it works fine in jsbin.com and in Visual Studio Code.

Thank U :slight_smile:

2

Hello @cybernerd

There are a few issues with the overall layout, and I suggest you’d revisit the section of the curriculum devoted to responsive web design. The section devoted to flex properties might be especially useful.

That being said, let me see if I can help you a little:

The items described in the navigation are indeed positioned at the top of the page, but consider which selector you are actually using.

#nav-bar ul {
  display: flex;
  top: 0;
  position: fixed;
  padding: 10px;
  list-style-type: none;
}

Here you have plenty of options. You already started with a display property on the unordered list with a value of flex, so the list items are displayed in a row. If you consider properties like justify-content, you’ll be able to position the items in a variety of ways.

Be careful that the <nav> element occupies only as much space as to display the content nested between its opening and closing tag. You can see this by examining the element in the developer tools, or visually giving the <nav> a distinct visual:

#nav-bar {
   background: white;
}

You can change the width directly in CSS, for instance to have the navigation stretch across the viewport.

#nav-bar {
   background: white;
   width: 100%;
}

With this setup, you can position the list item in a variety of ways. For instance:

#nav-bar ul {
   display: flex;
   padding: 10px;
   list-style-type: none;

   justify-content: space-around;
}

Alternatively, you can introduce space by adding a margin property on the individual list items.

.nav-link {
   margin: 0 0.5rem; 
}

I don’t understand the issue with the .logo class, and for the last point I cannot be of more help either. At least for me, the testing suite is running correctly and displaying the 15/16 mark.

Hope you find this somehow helpful. :crossed_fingers:

1 Like
3

@borntofrappe, thank you so much.