Personal Portfolio Webpage - Build a Personal Portfolio Webpage

HTML-CSS
#1

Tell us what’s happening:
Describe your issue in detail here.
Despite adding 2 media queries, I am unable to pass the media query user story.
(This code is just the bare minimum that I need to pass the user stories. I’ll be fine-tuning it after I pass all the stories.)

  **Your code so far**

/* file: index.html */
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <title>personal portfolio</title>
  <link rel="stylesheet" href="style.css" />
</head>
<body>
  <navbar id="navbar">
    <ul>
      <li><a href="#welcome-section">welcome</a></li>
      <li><a href="#projects">projects</a></li>
    </ul>
  </navbar>
  <section id="welcome-section">
    <h1>vjakhroihioh</h1>
  </section>
  <section id="projects">
    <h1 class="project-tile"></h1>
    <a id="profile-link" href="--added my profile link here--" target="_blank">click on me!</a>
  </section>
</body>
</html>

/* file: styles.css */
#projects { display: grid; grid-template-columns: 1fr 1fr 1fr 1fr; grid-gap: 5px; }
@media screen and (max-width: 1000px){
  @media (max-width: 400px) { #projects { display: grid; grid-template-columns:1fr; grid-gap: 5px; }
  }
}
#welcome-section{
  height: 100vh;
}
#navbar{
  position: absolute;
  top: 0;
}
@media only screen and (max-width: 600px){
html {
    font-size: 1em;
}
}



      **Your browser information:**

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

**Challenge:**  Personal Portfolio Webpage - Build a Personal Portfolio Webpage

**Link to the challenge:**
https://www.freecodecamp.org/learn/2022/responsive-web-design/build-a-personal-portfolio-webpage-project/build-a-personal-portfolio-webpage
1 Like
#2

Hi @sriyashree

You have 1 media query wrapped in another at the top . It is best practice to add them at the bottom of your style sheet in order.
the style sheet reads from top to bottom so essentially you should always write your css, then add media queries in the order they need to be read

#3

Hi, even after I remove the media query at the top, the problem still persists. Here is my current CSS code:

#welcome-section{

height: 100vh;

}

#navbar{

position: absolute;

top: 0;

}

@media only screen and (max-width: 600px){

html {

font-size: 1em;

}

}

Even now, all the user stories are still fulfilled, except for the media query one. Could you please help me with this?

#4

sorry is it a freecodecamp.org challenge

#5

are you sure that your css is having any effect?

1 Like
#6

@ilenia yes, I have linked my stylesheet to the HTML, and it is affecting the HTML, as the navbar condition(user story 11) is showing as to have been fulfilled.

#7

I would double check what’s the name of the file

1 Like
#8

@jasper2 yes it is, it’s the last project for the (New) Responsive Web Design certification course

#9

ok, could we have a link? we dont remember all the lesson

#10

thanks a lot guys, it seems that was the problem