Ravenous - Missing h1 Code

For some reason, the Ravenous code I have is missing this piece of code in App.css,

h1 {
  padding: .66rem 0;
  text-align: center;
  background-color: #cca353;
  font-family: Poppins, sans-serif;
  font-size: 1.8rem;
  color: #fff;
}

This means the banner heading doesn’t render properly. I found it in the solution though and pasted it into my file and now the banner appears as it should do. I just thought I should mention it.

You may have had a copy/paste mistake from Part 1 of the project. Step 44 links the CSS file for App and it includes that block of CSS

Thanks for your reply. That is so weird because the text I have in App.css is completely different (see below),

.App {
  text-align: center;
}

.App-logo {
  height: 40vmin;
  pointer-events: none;
}

@media (prefers-reduced-motion: no-preference) {
  .App-logo {
    animation: App-logo-spin infinite 20s linear;
  }
}

.App-header {
  background-color: #282c34;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  font-size: calc(10px + 2vmin);
  color: white;
}

.App-link {
  color: #61dafb;
}

@keyframes App-logo-spin {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(360deg);
  }
}

Do you have any idea why I have such different code in my version of App.css? Should the above code be somewhere else? Thank you.

That looks like the default App.css after using create-react-app to start the project since it creates a page with a spinning logo to show it’s working. You may have seen that the file already existed so you thought you completed it already when going through the many steps of Part 1.

2 Likes

Thanks a lot for your fast response. Yes, you are probably right that I made some sort of assumption. I guess I am still learning!