Personal Portfolio Webpage - Build a Personal Portfolio Webpage

Tell us what’s happening:
The media query is actually working, with change in background color, but the task is still not considered complete by fcc website. I have also checked for any possible blank characters but have found none so far. In fact, I even put through Google Bard to check if any errors are there, but non which substantially impact came out, except for empty link issue. I have also tried adding images, which also posed no issue, yet the answer wasn’t accepted. Please help find the issue here.

Your code so far

<!-- file: index.html -->
<!doctype html>
<html lang='en'>
<head>
  <style>
    @media only screen and (max-width: 600px) {
      h1 {
        background-color: green;
      }
    }
  </style>
  <meta charset='utf-8' />
  <meta name='viewport' content='width=device-width, initial-scale=1.0' />
  <link rel='stylesheet' href='styles.css' />
  <meta name='description' content="Aryaman Chauhan's Personal Portfolio Website" />
  <meta name='keywords' content='Pilani, BITS Pilani, Aryaman Chauhan, aryaman chauhan bits, aryaman chauhan bits pilani, aryaman chauhan pilani, aryaman pilani, aryaman bits' />
  <meta name='author' content='Aryaman Chauhan' />
  <link rel='stylesheet' href='styles.css' />
  <title>Aryaman Chauhan - Machine and Deep Learner. Web Developer. Game Developer.</title>
</head>
<body>
  <header>
    <nav id='navbar'>
      <img id='logo' src='' loading='lazy' alt='logo' />
      <ul id='nav-list'>
        <li><a class='nav-link' href='#projects'>Projects</a></li>
      </ul>
    </nav>
    <section id='welcome-section'>
      <p>Hey, I am</p>
      <h1>Aryaman Chauhan</h1>
      <p>a Machine and Deep Learner, Web Developer and Game Developer</p>
    </section>
  </header>
  <main>
    <section id='projects'>
      <h2>Some of my previous projects</h2>
      <a class='project-tile' href='https://github.com/Aryaman-Chauhan/YOLOv4_YOLOv7_Heroku_Deployment' target='_blank'>
        <img class='project-image' src='' alt='project' loading='lazy' />
        <p class='project-title'>Project 1</p>
      </a>
    </section>
  </main>
  <footer>
    <a id='profile-link' href='github.com/Aryaman-Chauhan' target='_blank'>Github</a>
  </footer>
</body>
</html>

/* file: styles.css */
@media (max-width: 28.75em) {
  .nav {
    justify-content: center;
  }

  .nav-list {
    margin: 0 1rem;
  }
}

*{
  box-sizing:border-box;
  margin:0;
  padding:0;
  background-color:pink;
}

@media (max-width: 480px) {
  *{
    background-color:purple;
  }
}

#nav-list{
  list-style:none;
}
.nav-link{
  text-decoration:none;
  color: black;
}

#navbar{
  display: flex;
  justify-content: flex-end;
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  background: var(--main-red);
  box-shadow: 0 2px 0 rgba(0, 0, 0, 0.4);
  z-index: 10;
  
}



#welcome-section{
  
  height:100vh;
}


Your browser information:

User Agent is: Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/117.0.0.0 Safari/537.36

Challenge: Personal Portfolio Webpage - Build a Personal Portfolio Webpage

Link to the challenge:

Hello.

What issue the step says?

By the way… the media querys should be at the end of the file.

Grets.

You’ve got two of these in the head. Remove the duplicate and I think you will pass.

This is not required. They just need to be placed where they make sense (i.e. they don’t get overridden by something else).

I first added a @media to end of css in case if parsing was the issue, and then removed the double link, and it was finally accepted. Thanks for pointing that out.

This topic was automatically closed 182 days after the last reply. New replies are no longer allowed.