Technical Documentation Page - Build a Technical Documentation Page

can someone please figure out whats wrong with my media query? i dont know why its not working.

Your code so far

<!-- file: index.html -->
<script src=""></script>

<div class="main-body">
<nav id="navbar">
    <header>JS Documentation</header>
    <a href="#Introduction" class="nav-link">Introduction</a>
    <a href="#Javascript" class="nav-link">Javascript</a>
    <a href="#Variables" class="nav-link">Variables</a>
    <a href="#Scope" class="nav-link">Scope</a>
    <a href="#Functions" class="nav-link">Functions</a>

<main id="main-doc">
    <section class="main-section" id="Introduction">
        <p>the first time i was introduced to programming, i never knew i will be successful.thought it was beyoun my strenght</p>
        <p>but with determinations and dedications, i am getting better at it. </p>

    <section class="main-section" id="Javascript">
        <p>Javascript and java are similar in some ways but different in others</p>
        <p>the javascript language resembles java but does not have static typing</p>
        <code>function greetMe(yourName){
            alert("hello " +yourName);
            <li>control flow</li>
            <li>the strange parts</li>

    <section class="main-section" id="Variables">
        <p>i love variable , the allow you to store any item with a prefered name during coding.</p>
        <p>variables are available in all the programming language</p>
        <code>const PI = 3.14;</code>
        <code>//THIS WILL CAUSE AN ERROR
            function f() {};
            const f = 5;
            function () {
                const g = 5;
                var g;

    <section class="main-section" id="Scope">
        <p>the scope of programming is so broad, from python, c++, java, javascript etc</p>
        <p>a lot of people dont like programming because it requires a lot of time and its very stressful</p>
        <code>if (true) {
            var x = 5; 
        console.log(x); //5</code>

    <section class="main-section" id="Functions">
        <p>functions are very useful in programming, makes it easier, faster and more efficient</p>
        <p>however, if you forget to call a function, it does not work</p>
        <code>fuunction square(number) {
            return number * number;
        <code>return number * number;</code>


/* file: styles.css */
    display: grid;
    grid-template-columns: minmax(200px, auto) 1fr;
    grid-template-areas: "navbar mainContent"; 
    grid-gap: 20px;

    grid-area: navbar;
    position: fixed;

nav#navbar a {
    dispaly: block;
    border: 1px solid black;
    padding: 5px;
    margin: 10px 0;
    text-decoration: none;
    color: black;

    grid-area: mainContent;

    font-size: 1.5em;
    font-weight: bold;
    background-color: #ccc;
    display: 20px

@media screen and (max-width: 750px) {
    div.main-body {
        grid-template-columns: 1fr;
        grid-template-areas: "navbart" "mainContent";
        position: inherit;

Your browser information:

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

Challenge: Technical Documentation Page - Build a Technical Documentation Page

Link to the challenge:

You need to create a head element and link your stylesheet first to use the media query?

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