Hi, some problems with the viewport

HTML-CSS
1

Tell us what’s happening:
Describe your issue in detail here.
i’m getting this:

  • Failed:Your portfolio should use at least one media query.

  • Failed:Your #navbar element should always be at the top of the viewport.

     **Your code so far**

/* file: index.html */
<nav id="navbar">
 <ul>
  <li> <a class="nav-link" href="#projects">projects</a></li> 
  <li>contact</li>
</ul>
</nav>

<section id="welcome-section">
 </br></br>
 <h1>Hi I'm Arminius</h1>
</section>
<section id="projects">
 <h2 class="project-tile">These are some of my proyects</h2>
       
     
      <ul>
     <li><a id="profile-link" href="https://codepen.io/arminius88/pen/QWaZxWx" target="_blank">Tribute page</a></li>
     
   <li>  <a id="profile-link" href="https://codepen.io/arminius88/pen/JjMmexZ" target="_blank">Survey</a></li></ul>
</section>

/* file: styles.css */
#nav{
 background:white;
 width:100%;
 position:fixed;
 top:0;
 left:0;
 
 
}
li{
  list-style-type:none;
 
 
}

a{
 text-decoration:none;
 

 
}

html {
 box-sizing: border-box;
 scroll-behavior: smooth;
 height:100%;
 }
 


h1,h2{
 text-align:center;
 
}
 

ul{
 display:flex;
 flex-direction:row;
 justify-content:space-around;
}

@media only screen and (max-width: 500px) {
 nav ul {
   text-align: center;
 }

body{
 height:100%;
}

   **Your browser information:**

User Agent is: Mozilla/5.0 (X11; CrOS x86_64 12239.92.0) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/76.0.3809.136 Safari/537.36

Challenge: Build a Personal Portfolio Webpage

Link to the challenge:

2

First, you didn’t link the CSS style sheet to the HTML:

“Note: Be sure to add <link rel="stylesheet" href="styles.css"> in your HTML to link your stylesheet and apply your CSS”

Second, if you use the browser’s dev tools inspector to look at the list you’ll see that the browser automatically adds a top margin to the list which is keeping the #navbar from being at the very top of the page, so you’ll want to get rid of the list top margin.

Finally, and although this won’t keep you from passing, you are missing a closing curly brace on your media query.

3

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