Personal Portfolio Webpage - media querry is not passing

Tell us what’s happening:
I have tried many media quarries but none are passing.
Please help.

Your code so far

<!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="https://use.fontawesome.com/releases/v5.8.2/css/all.css"
    />
    <link rel="stylesheet" href="styles.css"/>
  </head>
  <body>

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

      </nav>
    </header>
    <div id="welcome-section">
      <h1>Hey I am Suneel</h1>
      <h2><i>a web developer</i></2>
      </div>
      <section  id="projects">
        <h1>These are some of my projects</h1>
        <hr>
      <div class="project-tile">
        <div class="card">
        <a href="https://codepen.io/suneelanand/pen/KKemmyB" ><img src="https://shots.codepen.io/suneelanand/pen/KKemmyB-1280.jpg?version=1668225964"> <h3>Survey Form</h3></a>
        </div>
      
      
<div class="card">
        <a href="https://codepen.io/suneelanand/pen/poKwXKm">
          <img src="https://shots.codepen.io/suneelanand/pen/poKwXKm-1280.jpg?version=1668475112"><h3>Louis Pasteur Tribute Page</h3>
        </a>
        </div>
        <div class="card">
        <a href="https://codepen.io/suneelanand/pen/YzvQoOr"> <img src="https://shots.codepen.io/suneelanand/pen/YzvQoOr-1280.jpg?version=1668475328"><h3>HACCP Technical Documentation</h3></a>
        </div>

<div class="card">
        <a href="https://codepen.io/suneelanand/pen/rNKwEoO"> <img src="https://shots.codepen.io/suneelanand/pen/rNKwEoO-1280.jpg?version=1668475680" /><h3>Product Landing Page</h3>
        </a>
        </div>
        
    
        
      </div>
      <div id="show-all">
       <a id="profile-link" href='https://www.freecodecamp.org/' target="_blank"><button>Show All &gt;</button></a>   
      </section>
      <section id="contact">
        <div>
          <h1>Let's work Together...</h1>
          <h2><i>How do you take your coffee ?<i></h2>
          </div>
        </div>
        <div>
          

        <div class="social">
         <div class="icons">
          <a href="www.facebook.com"> <i class="fab fa-facebook-f"></i>
           <span>Facebook</span></a>
           <div class="icons">
          <a href="www.twitter.com"> <i class="fab fa-twitter"></i>
           <span>Twitter</span></a>
         </div>
        </div>
        </div>
        
      </section>
      <section class="footnote">
        <hr>
       
        <footer>
          
          <p>This is an original portfolio.All the projects and contact details are real</p>
          <p><a href="www.freecodecamp.org">© created for freecodecamp<a></p>

        </footer>

      </section>



  </body>
  </html>

/ css/

* {margin:0;
top:0; box-sizing:border-box;}
header {
  position:fixed;top:0px;
  }
#navbar  ul{background-color:#be3144;
display:flex;
height:80px; justify-content:flex-end; align-items:center;
border:1px solid black;}
#navbar ul li{list-style:none;
padding:25px 40px 25px 50px;
font-size:30px; font-weight:bold;
color:#f5f6f7;margin-right:20px;}
#navbar a { color:#f5f6f7;text-decoration:none;}

nav ul li:hover {background-color:#45567d; overflow:hidden;}
#navbar {position:fixed;width:100%;top:0;}

#welcome-section {width:100%;height:100vh;  background-color:#1b1b32;
display:flex;
align-items:center; flex-direction:column;
justify-content:center;  }

#welcome-section h1 {
  text-align:center;
  display:block;
  font-size:70px;
  color:#f5f6f7;
  font-weight:bold;
}
#welcome-section h2 {
  text-align:center;
  display:block;
  font-size:50px;
  color:orangered;
  font-weight:bold;}

img { width: 100%;
  max-width: 600px;
  height: auto;min-width:500px; border-radius:4px;
  box-shadow: 0 1px 1px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19); margin:20px;
  border-top:1px solid #1b1b32;
  border-left:1px solid #1b1b32;
  border-right:1px solid #1b1b32;
  
  }
  #projects {
    background-color:#45567d;
    padding-top:20px;margin-bottom:20px;top:0;
  }
#projects h1 { text-align:center;
color:#f5f6f7;
padding:20px;
font-size:40px;}

#projects hr {color:#f5f6f7;
margin:-10px auto;;
width:50%;}
.project-tile {display:flex; flex-wrap:wrap;justify-content:center;margin-top:30px;

}
.card a {text-decoration:none;}
 
 .card h3 {background-color:#303841;
 color:#f5f6f7;
 padding:8px;
 font-size:25px;
 text-align:center;
 margin-top:-20px;
 margin-left:20px;
 margin-right:20px;
 box-shadow: 0 1px 1px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
 border-bottom:1px solid #1b1b32;
  border-left:1px solid #1b1b32;
  border-right:1px solid #1b1b32;

 }
 button { color:#f5f6f7;background-color:#45567d;
 font-weight:bold;
 border-radius:4px;
 margin:40px  auto;
 padding:10px 20px 10px 20px;
 font-size:1.5rem;
 display:block;
 box-shadow: 0 1px 1px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
 border-bottom:1px solid #1b1b32;
  border-left:1px solid #1b1b32;
  border-right:1px solid #1b1b32;
}

 #profile-link {text-decoration:none; 
 }
button:hover {background-color:#be3144;color:#f5f6f7;
}

#contact { width:100%;height:50vh;  background-color:#1b1b32;
display:flex;
align-items:center; flex-direction:column;
justify-content:center;
margin-top:-40px;
}

#contact h1 {text-align:center;
  display:block;
  font-size:70px;
  color:#f5f6f7;
  font-weight:bold;
  margin-bottom:30px;
  
  }
  #contact h2 {
    text-align:center;
  display:block;
  font-size:20px;
  color:#f5f6f7;
  font-family:monospace;


  }
  #show-all {padding-bottom:20px;}

  .icons {display:flex; }
  .social a {text-decoration:none;margin:20px;padding:20px; color:#f5f6f7; font-size:3rem;
  font-family:poppins sans-serif;}
  .footnote {
    background-color:#1b1b32;
    margin-top:-50px;
  }
  footer p {color:#f5f6f7; font-size:1.5rem; margin-left:25px;
  margin-right:-10px;
  }
  footer {display:flex; justify-content:space-between;
  padding-bottom:70px;
  margin-top:20px}
  footer a { text-decoration:none;color:#f5f6f7;}
  

  .social a:hover {animation:shake 2s infinite;}
  @keyframes shake {
    10% {transform:scale(1.05) rotate(5deg);
    20%{transform:scale(1.05) rotate(5deg);
    30% {transform:scale(1.05) rotate(5deg);
    40% {transform:scale(1.05) rotate(5deg);
    }




@media (max-width:500px)
#navbar ul {
    background-color:black;
}

WARNING

The challenge seed code and/or your solution exceeded the maximum length we can port over from the challenge.

You will need to take an additional step here so the code you wrote presents in an easy to read format.

Please copy/paste all the editor code showing in the challenge from where you just linked.

Replace these two sentences with your copied code.
Please leave the ``` line above and the ``` line below,
because they allow your code to properly format in the post.

Your browser information:

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

Challenge: Personal Portfolio Webpage - Build a Personal Portfolio Webpage

Link to the challenge:

Hi!
Welcome to the forum!

Your media query is missing some curly brackets. Remember that media queries should have curly brackets that wrap around the css selector they are affecting.

@media (max-width:500px)
#navbar ul {
    background-color:black;
}

This W3schools article may help.

Hi Ella,
thank you for the reply,
I added the curly brackets but the code still won’t :face_with_diagonal_mouth: pass.

@media (max-width:500px)
#navbar ul {
    background-color:black;
}

I’ve edited your code for readability. 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 (').

you need to add a { on the end of the @media line
and a } in a new line at the bottom of this block of code in order to enclose the css within the media rule

Hi !,

thank you for your reply, I added the curly brackets, added one more media query but it still wont pass.

@media (max-width:500px) {
#navbar ul {
background-color: lightblue;
}
}

@media only screen and (max-width: 600px) {
#welcome-section {
background-color: lightblue;
}
}

can you post the full code so I can try it on my end?

<!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="https://use.fontawesome.com/releases/v5.8.2/css/all.css"
    />
    <link rel="stylesheet" href="styles.css"/>
  </head>
  <body>

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

      </nav>
    </header>
    <div id="welcome-section">
      <h1>Hey I am Suneel</h1>
      <h2><i>a web developer</i></2>
      </div>
      <section  id="projects">
        <h1>These are some of my projects</h1>
        <hr>
      <div class="project-tile">
        <div class="card">
        <a href="https://codepen.io/suneelanand/pen/KKemmyB" ><img src="https://shots.codepen.io/suneelanand/pen/KKemmyB-1280.jpg?version=1668225964"> <h3>Survey Form</h3></a>
        </div>
      
      
<div class="card">
        <a href="https://codepen.io/suneelanand/pen/poKwXKm">
          <img src="https://shots.codepen.io/suneelanand/pen/poKwXKm-1280.jpg?version=1668475112"><h3>Louis Pasteur Tribute Page</h3>
        </a>
        </div>
        <div class="card">
        <a href="https://codepen.io/suneelanand/pen/YzvQoOr"> <img src="https://shots.codepen.io/suneelanand/pen/YzvQoOr-1280.jpg?version=1668475328"><h3>HACCP Technical Documentation</h3></a>
        </div>

<div class="card">
        <a href="https://codepen.io/suneelanand/pen/rNKwEoO"> <img src="https://shots.codepen.io/suneelanand/pen/rNKwEoO-1280.jpg?version=1668475680" /><h3>Product Landing Page</h3>
        </a>
        </div>
        
    
        
      </div>
      <div id="show-all">
       <a id="profile-link" href='https://www.freecodecamp.org/' target="_blank"><button>Show All &gt;</button></a>   
      </section>
      <section id="contact">
        <div>
          <h1>Let's work Together...</h1>
          <h2><i>How do you take your coffee ?<i></h2>
          </div>
        </div>
        <div>
          

        <div class="social">
         <div class="icons">
          <a href="www.facebook.com"> <i class="fab fa-facebook-f"></i>
           <span>Facebook</span></a>
           <div class="icons">
          <a href="www.twitter.com"> <i class="fab fa-twitter"></i>
           <span>Twitter</span></a>
         </div>
        </div>
        </div>
        
      </section>
      <section class="footnote">
        <hr>
       
        <footer>
          
          <p>This is an original portfolio.All the projects and contact details are real</p>
          <p><a href="www.freecodecamp.org">© created for freecodecamp<a></p>

        </footer>

      </section>



  </body>
  </html>
* {margin:0;
top:0; box-sizing:border-box;}
header {
  position:fixed;top:0px;
  }
#navbar  ul{background-color:#be3144;
display:flex;
height:80px; justify-content:flex-end; align-items:center;
border:1px solid black;}
#navbar ul li{list-style:none;
padding:25px 40px 25px 50px;
font-size:30px; font-weight:bold;
color:#f5f6f7;margin-right:20px;}
#navbar a { color:#f5f6f7;text-decoration:none;}

nav ul li:hover {background-color:#45567d; overflow:hidden;}
#navbar {position:fixed;width:100%;top:0;}

#welcome-section {width:100%;height:100vh;  background-color:#1b1b32;
display:flex;
align-items:center; flex-direction:column;
justify-content:center;  }

#welcome-section h1 {
  text-align:center;
  display:block;
  font-size:70px;
  color:#f5f6f7;
  font-weight:bold;
}
#welcome-section h2 {
  text-align:center;
  display:block;
  font-size:50px;
  color:orangered;
  font-weight:bold;}

img { width: 100%;
  max-width: 600px;
  height: auto;min-width:500px; border-radius:4px;
  box-shadow: 0 1px 1px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19); margin:20px;
  border-top:1px solid #1b1b32;
  border-left:1px solid #1b1b32;
  border-right:1px solid #1b1b32;
  
  }
  #projects {
    background-color:#45567d;
    padding-top:20px;margin-bottom:20px;top:0;
  }
#projects h1 { text-align:center;
color:#f5f6f7;
padding:20px;
font-size:40px;}

#projects hr {color:#f5f6f7;
margin:-10px auto;;
width:50%;}
.project-tile {display:flex; flex-wrap:wrap;justify-content:center;margin-top:30px;

}
.card a {text-decoration:none;}
 
 .card h3 {background-color:#303841;
 color:#f5f6f7;
 padding:8px;
 font-size:25px;
 text-align:center;
 margin-top:-20px;
 margin-left:20px;
 margin-right:20px;
 box-shadow: 0 1px 1px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
 border-bottom:1px solid #1b1b32;
  border-left:1px solid #1b1b32;
  border-right:1px solid #1b1b32;

 }
 button { color:#f5f6f7;background-color:#45567d;
 font-weight:bold;
 border-radius:4px;
 margin:40px  auto;
 padding:10px 20px 10px 20px;
 font-size:1.5rem;
 display:block;
 box-shadow: 0 1px 1px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
 border-bottom:1px solid #1b1b32;
  border-left:1px solid #1b1b32;
  border-right:1px solid #1b1b32;
}

 #profile-link {text-decoration:none; 
 }
button:hover {background-color:#be3144;color:#f5f6f7;
}

#contact { width:100%;height:50vh;  background-color:#1b1b32;
display:flex;
align-items:center; flex-direction:column;
justify-content:center;
margin-top:-40px;
}

#contact h1 {text-align:center;
  display:block;
  font-size:70px;
  color:#f5f6f7;
  font-weight:bold;
  margin-bottom:30px;
  
  }
  #contact h2 {
    text-align:center;
  display:block;
  font-size:20px;
  color:#f5f6f7;
  font-family:monospace;


  }
  #show-all {padding-bottom:20px;}

  .icons {display:flex; }
  .social a {text-decoration:none;margin:20px;padding:20px; color:#f5f6f7; font-size:3rem;
  font-family:poppins sans-serif;}
  .footnote {
    background-color:#1b1b32;
    margin-top:-50px;
  }
  footer p {color:#f5f6f7; font-size:1.5rem; margin-left:25px;
  margin-right:-10px;
  }
  footer {display:flex; justify-content:space-between;
  padding-bottom:70px;
  margin-top:20px}
  footer a { text-decoration:none;color:#f5f6f7;}
  

  .social a:hover {animation:shake 2s infinite;}
  @keyframes shake {
    10% {transform:scale(1.05) rotate(5deg);
    20%{transform:scale(1.05) rotate(5deg);
    30% {transform:scale(1.05) rotate(5deg);
    40% {transform:scale(1.05) rotate(5deg);
    }




@media (max-width:500px) {
#navbar ul {
    background-color: lightblue;
}
}

 @media only screen and (max-width: 600px) {
  #welcome-section {
    background-color: lightblue;
  }
}

I’ve edited your code for readability. 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 (').

The css has some errors here:

  .social a:hover {animation:shake 2s infinite;}
  @keyframes shake {
    10% {transform:scale(1.05) rotate(5deg);
    20%{transform:scale(1.05) rotate(5deg);
    30% {transform:scale(1.05) rotate(5deg);
    40% {transform:scale(1.05) rotate(5deg);
    }

You have to fix this block of code as there is multiple issues there.(missing } after each transform line)

Also please copy the html code into this online html validator

https://validator.w3.org/#validate_by_input

It will show you some errors you must fix.
Once they are fixed, please check if the code passes.

Hopefully all these fixes will make a difference.

Thanks a lot !!!
you rock :+1:

1 Like