Technical Documentation Page - Media Query Issue

Tell us what’s happening:
Hi everyone! I’m writing code for Technical Documentation Page and get stuck when adding media queries. I can’t figure out why the navbar doesn’t span full the width of the page and it’s fixed when I scrolling down. Please help! Thank you!

Your code so far

/*HTML code*/

<!DOCTYPE html>
<html lang='en'>
  <head>
<meta charset='utf-8'>
  <meta name='viewport' content='width=device-width,initial-scale=1.0'>
  <link rel='stylesheet' href='styles.css'>
<link href="https://fonts.googleapis.com/css2?family=Nunito+Sans:wght@300&display=swap" rel="stylesheet">
<link href="https://fonts.googleapis.com/css2?family=Nunito+Sans&display=swap" rel="stylesheet">
  <title>Technical Documentation Page</title>
</head>

<body>
  
<nav id='navbar'>
  <header>
    JS Documentation
    </header>

  <ul>
    <li><a href="#Introduction" class='nav-link'>
      Introduction
      </a></li>

    <li><a href="#What_you_should_already_know" class='nav-link'>
      What you should already know
      </a></li>

    <li><a href="#Javascript_and_Java" class='nav-link'>
      Javascript and Java
      </a></li>

    <li><a href='#Hello_World' class='nav-link'>
      Hello World
      </a></li>

    <li><a href='#Variables' class='nav-link'>
      Variables
      </a></li>

    <li><a href='#Declaring_variables' class='nav-link'>
      Declaring variables
      </a></li>

<li><a href='#Variable_scope' class='nav-link'>
  Variable scope
  </a></li>

<li><a href='#Global_variables' class='nav-link'>
  Global variables
  </a></li>

<li><a href='#Constants' class='nav-link'>
  Constants
  </a></li>

<li><a href='#Data_types' class='nav-link'>
  Data types
  </a></li>

<li><a href='#if...else_statement' class='nav-link'>
  if...else statement
  </a></li>

<li><a href='#while_statement' class='nav-link'>
  while statement
  </a></li>

<li><a href='#Function_declarations' class='nav-link'>
  Function declarations
  </a></li>

<li><a href='#Reference' class='nav-link'>
  Reference
  </a></li>
    </ul>
    </nav>
@media only screen and (max-width: 815px) {
  
  #navbar ul{
    height: 207px;
    border-top:1px solid;
    
  }

  #navbar{position:absolute;
  top:0;
  padding:0;
  margin:0;
  width:100%;
max-height:275px;
  border:none;
  z-index:1;
  
  }

#navbar li{position:relative;}

  .main-section {
    margin-left: -310px;
    position:relative;

  }

  #Introduction{margin-top:300px;
}}
 
@media only screen and (max-width: 400px) {
  #main-doc {
    margin-left: -10px;
  }}

html,body{min-width:290px;
font-family:nunito sans;
line-height:1.5;
text-align:justify;}

#navbar{
min-width:290px;
width:300px;
height:100%;
position:fixed;
top:0px;
left:-10px;
border-right: 1px solid black;
}

#navbar ul{overflow-y:auto;
overflow-x:hidden;
height:88%;
}

#navbar li{line-height:2.75;
font-size:16.5px;
list-style:none;
margin-left:-30px;
border-top:1px solid black;
padding-left:30px;
position:relative;
width:100%;
}

#navbar a{text-decoration:none;
color:black;
display:block;
}

#main-doc{
font-size:16px;
position:absolute;
padding:0px 30px;
margin-top:20px;
margin-left:310px;
margin-right:30px;
margin-bottom:110px;
}

#main-doc header{margin:0;
text-align:left;}

header{font-size:30;
font-weight:600;
margin:10;
text-align:center;
}

Your browser information:

User Agent is: Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_7) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/109.0.0.0 Safari/537.36

Challenge: Technical Documentation Page - Build a Technical Documentation Page

Link to the challenge:

Your media queries should be at the end of your CSS file. Try moving them and see if that fixes any issues.

1 Like

It worked. Thank you so much.

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