Bug Report: Technical Documentation Page - Build a Technical Documentation Page

HTML-CSS
1

Tell us what’s happening:

On the mentioned test the step testing for the presence of a media query doesn’t recognize it on the styles.css file, instead only passing the test while it is present on a style tag inside the HTML file. (The way I managed to pass the test)

Your code so far

The code is too long for this format. I’m linking a codepen as the example of the code: Here

Within the CSS:

@media(max-width: 1300px){
    body{
        border: 0;
    }
}

Within the HTML:

<style>@media(max-width: 1300px){
        body{
            border: 0;
        }
    }</style> <!-- Had to add this so the page could 'find' the media query -->

Only works if adding it directly in the HTML inside a style tag

Your browser information:

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

Challenge Information:

Technical Documentation Page - Build a Technical Documentation Page

2

Hmm, on your codepen, I removed the style element in your HTML and changed the media query in your CSS to

@media(max-width: 800px){
    body{
        background: pink;
    }
}

And the background changed to pink when I narrowed my browser enough. So it seems to be working for me. Can you replicate on your end?

2 Likes
3

The Media Query itself has always worked, the bug is the tests fail to recognize there is a media query in the CSS to approve the lesson,

There’s one larger @ media tweaking the nav-bar just above the one I decided to write there and replicate in the HTML for the sake of showing

@media (max-width: 720px) {
    body{
        grid-template-columns: auto;
        column-gap: 1rem;
        padding: 0;
    }
    nav{
    grid-column: 1/3;
    grid-row: 1/2;
    }
    main{
        padding: 0;
        margin: 0;
        margin-top: 1rem;
        grid-row: 2/3;
        grid-column: span 2;
        display: flex;
        flex-direction: column;
        justify-content: center;
    }
    nav{
        height: 50px;
        overflow: hidden;
        transition: 0.5s ease;
    }
    nav:hover, nav:active{
        height: fit-content;
        overflow: hidden;
    }
}
4

hmm, I don’t know what to say. I literally copy/pasted your HTML and CSS from codepen into the project editors and it passed for me. I did not make any changes to either.

5

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