Problem with landing page certification run test

Hi. When I run the test for the certification in the landing page project it does not recognize the 3 last stories, the media query, flexbox and nav-bar at the top of the viewport and I am pretty sure they are fine or at least they are there. Somebody can give a hint about what the problem is.

Here is the code:

https://www.freecodecamp.org/learn/2022/responsive-web-design/build-a-product-landing-page-project/build-a-product-landing-page

HI @riveradelaluna !

Welcome to the forum!

Did you link your css to the html document?

<head>
  <link rel="stylesheet" href="styles.css">
</head>

Oh, yeah maybe that is it, I just copied the code from Code pen because when I started the exercise that was the platform for the exercise.
Thanks. I am pretty sure that is

1 Like

Yeah, codepen handles a lot of stuff for you behind the scenes.

So that is why you didn’t have to worry about linking your css.
But in most code editors, like fcc and vs code it is required to link the two.

Yeah. Thank you very much. That solved two of three issues.
Thank you.

1 Like

Do you want to post your code?
We can help you with the remaining failing test

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.

See this post to find the backtick on your keyboard.
Note: Backticks (`) are not single quotes (’).

Thank you. The nav-bar is fixed at the top of the viewport and it does not move but when i run the test it say that it is not.

This is the header HTML

<header id="header" class="header-outer"><div class= "header-logo"><a><img alt="img" id="header-img" class= "header-image img " src= https://thumbs.dreamstime.com/b/vector-greek-drawing-illustration-ancient-style-mythical-plot-king-oedipus-sphinx-89431075.jpg></a></div>
  <div class="header-inner responsive-wrapper">
    
    <div>
  <h1>Le Librairie du Parthénon</h1>  
    </div>
  
  <nav id="nav-bar" class="header-navigation">
    <ul>
    <li><a class= "nav-link" href="#catalogo">Catalogue</a></li>
    <li><a class= "nav-link" href="#ejemplares-raros">Rare</a></li>
    <li><a class= "nav-link" href="#ejemplares-unicos">Unique</a></li>
    </ul>
  </nav>
  </div>
  </header>

And this is the CSS. It already has position fixed two times but the test does not check it right


/*header*/
nav {
    margin-top: 10px;
    padding: 100 50px;
    color: rgb(165,42,42);
    text-decoration: none;
  }

.header-image {
  width:170px;
  height:300;
  margin-left: -15px;
  margin-top: 0px;
  padding-left: 50px;
  padding-right: 50px;
  border-radius: 50%;
  zoom:150%;
}

.header-image:hover{
  transform: scale(1.1);
  transition: .5s;
}

header {
  display:flex;
  position:fixed;
  top:0;
  left:0;
  bottom:10;
  width:100%;
  text-align: "center"
}

.header-outer {
  display: inline-flex;
  align-content: center;
  align-items: center;
  justify-content: center;
  align-self: center;
  position: sticky;
  z-index: 1;
  width: 100%;
  height: 120px;
  margin: 0;
  top: -50px;
  background-color:rgb(149, 5, 9);
}

.header-inner {
  width: 100%;
  height: 70px;
  position: sticky;
  margin:0;
  top: 0;
  left: 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  align-content: center;
  align-self: center;
  text-align: center; 
}

.header-logo img {
  display: block;
  height: 70px;
}

.header-navigation {
  display: flex;
  flex-wrap: wrap;
}

.responsive-wrapper {
  width: 100%;
  max-width: 1280px;
  margin-left: auto;
  margin-right: auto;
}

#nav-bar {
  position: fixed;
}

  nav > ul {
  width: 35vw;
  display: flex;
  flex-direction: row;
  justify-content: space-around;
  align-self: flex-end;
  font-weight: 400;
  font-size: 22px;
  color: silver;
  list-style: none;
  text-decoration:none;
}

h1 {
  padding-left: 39px;
  text-align: center;
  align-self: center;
  display: inline-flex;
  color:#FFF6F2;
}

ul { 
  color: #FFF6F2; rgb(123,55,36);
}

a {
  text-decoration: none;
  color:#FFF6F2; rgb(21,5,11);
}

HI @riveradelaluna !

I stripped your css down to just the nav and header image to be able to see the issue better.
When I was only focused on that, then I realized the issue was your use of margin and padding. So I commented that out.

nav {
  position:fixed;
    /* margin-top: 10px;
    padding: 100 50px; */
    color: rgb(165,42,42);
    text-decoration: none;
  }

.header-image {
  width:170px;
  height:300;
  margin-left: -15px;
  margin-top: 0px;
  padding-left: 50px;
  padding-right: 50px;
  border-radius: 50%;
  zoom:150%;
}

I would also suggest moving your navbar right underneath the opening header tag since it is supposed to be towards the top of the page anyway.

Then it passes for me.

You were really close but you had a lot of extra stuff that was getting in the way of debugging.

I would suggest starting more bare bones and getting the tests to pass first and then you can style it more to your liking.

Hope that helps!

Many thanks. I never would have found this answer because I believed that using the fixed position was enough to get it right.

Yes, the header is a little too much and it’s not really very useful, but I wanted to try something a little bit fancy.

Thank you very much for your help.

1 Like

There’s nothing wrong with trying different things with styling.
It is all part of the learning process.

It is just easier to pass the tests first and then get crazy with styling later :slight_smile: