Personal Portfolio Webpage media query & navbar` element should always be at the top of the viewport

HTML-CSS
1

i already pass the test in code pen,but when run test here there some error shows that
Your portfolio should use at least one media query.
Your #navbar element should always be at the top of the viewport.

https://www.freecodecamp.org/learn/responsive-web-design/responsive-web-design-projects/build-a-personal-portfolio-webpagePreformatted text

<link
  rel="stylesheet"
  href="https://use.fontawesome.com/releases/v5.8.2/css/all.css"
  integrity="sha384-oS3vJWv+0UjzBfQzYUhtDYW+Pj2yciDJxpsK1OYPAYjqT085Qq/1cq5FLXAZQ7Ay"
  crossorigin="anonymous"
/>
<link
  href="https://fonts.googleapis.com/css?family=Poppins:200i,300,400&display=swap"
  rel="stylesheet"
/>
<link
  href="https://fonts.googleapis.com/css?family=Raleway:700&display=swap"
  rel="stylesheet"
/>
<!-- START NAV -->

<nav id="navbar" class="nav">
  <ul class="nav-list">
    <li>
      <a href="#welcome-section">About</a>
    </li>
    
    <li>
      <a href="#projects">Projects</a>
    </li>
    <li>
      <a href="#contact">Contact</a>
    </li>
  </ul>
</nav>

<!-- END NAV -->

<!-- START WELCOME SECTION -->

<section id="welcome-section" class="welcome-section">
  <h1>Hey There, I am Eduard</h1>
  <p>a<strong>Developer</strong></p>

</section>

<!-- END WELCOME SECTION -->

<!-- START PROJECTS SECTION -->

<section id="projects" class="projects-section">
  <h2 class="projects-section-header">These are some of my projects</h2>

  <div class="projects-grid">
    <a
      href="https://codepen.io/estancia14/full/zYRvENa"
      target="_blank"
      class="project project-tile"
    >
      <img
        class="project-image"
        src="https://api.time.com/wp-content/uploads/2018/11/gettyimages-517200612.jpeg?quality=85&w=800"
        alt="project"
      />
      <p class="project-title">
        <span class="code">&lt;</span>
        Tribute Page
        <span class="code">&#47;&gt;</span>
      </p>
    </a>
    
    <a
      href="https://codepen.io/estancia14/full/OJQyOJm"
      target="_blank"
      class="project project-tile"
    >
      <img
        class="project-image"
        src="https://filipinotimes.net/wp-content/uploads/2021/11/PH-Elections-drama-filipinotimes.jpg"
        alt="project"
      />
      <p class="project-title">
        <span class="code">&lt;</span>
        Political Survey Form
        <span class="code">&#47;&gt;</span>
      </p>
    </a>
    
    <a
      href="https://codepen.io/estancia14/full/VwQvQgY"
      target="_blank"
      class="project project-tile"
    >
      <img
        class="project-image"
        src="https://www.digitalassets.starbucks.eu/sites/starbucks-medialibrary/files/assets/28967bf9315bb04b5ef8525e04bc5659.jpg"
        alt="project"
      />
      <p class="project-title">
        <span class="code">&lt;</span>
        BroEd Coffee Landing Page
        <span class="code">&#47;&gt;</span>
      </p>
    </a>
    
    <a
      href="https://codepen.io/estancia14/full/vYdXKpq"
      target="_blank"
      class="project project-tile"
    >
      <img
        class="project-image"
        src=""
        alt="project"
      />
      <p class="project-title">
        <span class="code">&lt;</span>
        Documentation Page
        <span class="code">&#47;&gt;</span>
      </p>
    </a>
  </div>

  <a
    href=""
    class="btn btn-show-all"
    target="_blank"
    >Show all<i class="fas fa-chevron-right"></i
  ></a>
</section>

<!-- END PROJECTS SECTION -->

<!-- START CONTACT SECTION -->

<section id="contact" class="contact-section">
  <div class="contact-section-header">
    <h2>Let's work together...</h2>
    <p>How do you take your coffee?</p>
  </div>
  <div class="contact-links">
    <a
      href="https://facebook.com/ward1914"
      target="_blank"
      class="btn contact-details"
      ><i class="fab fa-facebook-square"></i> Facebook</a
    >
    <a
      id="profile-link"
      href="https://github.com/estancia14"
      target="_blank"
      class="btn contact-details"
      ><i class="fab fa-github"></i> GitHub</a
    >
    <a
      href="https://twitter.com/eduardestancia"
      target="_blank"
      class="btn contact-details"
      ><i class="fab fa-twitter"></i> Twitter</a
    >
    <a href="https://mail.google.com/mail/u/0/#inbox?compose=new" class="btn contact-details"
      ><i class="fas fa-at"></i> Send a mail</a
    >
    <a href="tel:555-555-5555" class="btn contact-details"
      ><i class="fas fa-mobile-alt"></i> Call me</a
    >
  </div>
</section>

<!-- END CONTACT SECTION -->

<!-- START FOOTER SECTION -->

<footer>
  <p>
    Portfolio
  </p>
  <p>
    &copy; Created for
    <a href="estanciaeduard.com" target="_blank"
      >eduard <i class="fab fa-free-code-camp"></i
    ></a>
  </p>
</footer>

<!-- END FOOTER SECTION -->



:root {
  --main-white: #f0f0f0;
  --main-navy-blue: #102039;
  --main-blue: #45567d;
  --main-gray: #303841;
}

/* Base reset */
* {
  margin: 0;
  padding: 0;
}

*,
*::before,
*::after {
  box-sizing: inherit;
}

html {
  box-sizing: border-box;


  font-size: 62.5%;
  scroll-behavior: smooth;
}

@media (max-width: 75em) {
  html {
    font-size: 60%;
  }
}


@media (max-width: 61.25em) {
  html {
    font-size: 58%;
  }
}


@media (max-width: 28.75em) {
  html {
    font-size: 55%;
  }
}

body {
  font-family: Poppins, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell, "Open Sans", "Helvetica Neue", sans-serif;
  font-size: 1.8rem; /* 18px */
  font-weight: 400;
  line-height: 1.4;
  color: var(--main-white);
}

h1,
h2 {
  font-family: Poppins, "Helvetica Neue", sans-serif;
  font-weight: 700;
  text-align: center;
}

h1 {
  font-size: 6rem;
}

h2 {
  font-size: 4.2rem;
}

ul {
  list-style: none;
}

a {
  text-decoration: none;
  color: var(--main-white);
}

img {
  display: block;
  width: 100%;
}

/* nav */

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

.nav-list {
  display: flex;
  margin-right: 2rem;
}

@media (max-width: 28.75em) {
  .nav {
    justify-content: center;
  }

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

.nav-list a {
  display: block;
  font-size: 2.2rem;
  padding: 2rem;
}

.nav-list a:hover {
  background: var(--main-blue);
}

/* Welcome section */

.welcome-section {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  width: 100%;
  height: 100vh;
  background-color: #000;
  background-image: linear-gradient(62deg, #3a3d40 0%, #E8EFF0 100%);
}

.welcome-section > p {
  font-size: 3rem;
  font-weight: 200;
  font-style: italic;
  color: var(--main-navy-blue);
}

/* 'Project's section */

.projects-section {
  text-align: center;
  padding: 10rem 2rem;
  background: var(--main-blue);
  
}

.projects-section-header {
  max-width: 640px;
  margin: 0 auto 6rem auto;
  border-bottom: 0.2rem solid var(--main-white);
}

@media (max-width: 28.75em) {
  .projects-section-header {
    font-size: 4rem;
  }
}

.projects-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
  grid-gap: 4rem;
  width: 100%;
  max-width: 1280px;
  margin: 0 auto;
  margin-bottom: 6rem;
}

@media (max-width: 30.625em) {
  .projects-section {
    padding: 6rem 1rem;
  }

  .projects-grid {
    grid-template-columns: 1fr;
  }
}

.project {
  background: var(--main-gray);
  box-shadow: 1px 1px 2px rgba(0, 0, 0, 0.5);
  border-radius: 10px;
}

.code {
  color: var(--main-gray);
  transition: color 0.3s ease-out;
}

.project:hover .code {
  color: #047CCD;
}

.project-image {
  height: calc(100% - 6.8rem);
  width: 100%;
  object-fit: cover;
  
}

.project-title {
  font-size: 2rem;
  padding: 2rem 0.5rem;
  
}

.btn {
  display: inline-block;
  padding: 1rem 2rem;
  border-radius: 2px;
}

.btn-show-all {
  font-size: 2rem;
  background: var(--main-gray);
  transition: background 0.3s ease-out;
}

.btn-show-all:hover {
  background: var(--main-navy-blue);
}

.btn-show-all:hover > i {
  transform: translateX(2px);
}

.btn-show-all > i {
  margin-left: 10px;
  transform: translateX(0);
  transition: transform 0.3s ease-out;
}

/* Contact section */

.contact-section {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  text-align: center;
  width: 100%;
  height: 80vh;
  padding: 0 2rem;
  background: var(--main-gray);
}

.contact-section-header > h2 {
  font-size: 6rem;
}

@media (max-width: 28.75em) {
  .contact-section-header > h2 {
    font-size: 4rem;
  }
}

.contact-section-header > p {
  font-style: italic;
}

.contact-links {
  display: flex;
  justify-content: center;
  width: 100%;
  max-width: 980px;
  margin-top: 4rem;
  flex-wrap: wrap;
}

.contact-details {
  font-size: 2.4rem;
  text-shadow: 2px 2px 1px #1f1f1f;
  transition: transform 0.3s ease-out;
}

.contact-details:hover {
  transform: translateY(8px);
}

/* Footer */

footer {
  font-weight: 300;
  display: flex;
  justify-content: space-evenly;
  padding: 2rem;
  background: var(--main-gray);
  border-top: 4px solid var(--main-red);
}

footer > p {
  margin: 2rem;
}

footer i {
  vertical-align: middle;
}

@media (max-width: 28.75em) {
  footer {
    flex-direction: column;
    text-align: center;
  }
}
2

Hi @estanciaeduard !

Welcome to the forum!

Did you properly link your CSS file to the html document?

<link rel="stylesheet" href="styles.css">
3

Your css doesn’t contain #navbar. It needs to and the #navbar element’s properties need to have the positioning as the test requires.

See this thread. It’s similar. The replies there might add to the help you need to pass this challenge.

4

thank you so much. it worked!

5

that helped using #navbar and the property fixed.

6

Silly mistake i made , corrected it. thank you.

7

did you solved media query issue ? I am not able to do it

8

Please open your own thread and post your code.

1 Like
9

I did that. Can you help ?

10

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