Personal Portfolio Webpage - media query and #navbar position fixed fail

HTML-CSS
1

Tell us what’s happening: The neither the at media rules I have included nor the fixed navbar are being recognized, and I am out of ideas on how to get this to pass. I found a few other posts with similar problems, but I didn’t find a solution for my problem. Please help.

Your code so far

    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>Profile page for Lisa Scott Savage with links to her projects.</title>
        <link rel="stylesheet" href="/styles.css"/>
        <link rel="preconnect" href="https://fonts.googleapis.com">
        <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
        <link href="https://fonts.googleapis.com/css2?family=Caveat:wght@400..700&display=swap" rel="stylesheet">
</head>
<body id="top">
    <header class="background-1">
        <div class="image-container">
            <img id="headshot" src="/headshot.jpeg" alt="stick-figure-person" width="auto" height="100px">
        </div>
        <div class="name-container">
            <h1 class="caveat" id="name">Lisa Scott Savage</h1>
        </div>
        <div class="navbar-container">
            <nav class="nav" id="navbar">
                <ul>
                    <li><a class="nav-link" href="#welcome-section">Welcome</a></li>
                    <li><a class="nav-link" href="#projects">Projects</a></li>
                    <li><a class="nav-link" href="#places-section">Places</a></li>
                </ul>
            </nav>
        </div>
    </header>

        <div class="profile-link-container">
            <a href="https://codepen.io/collection/MgLoNa" class="online-portfolios" target="_blank"><img width="50px" src=""</a> 

            <a href="https://www.freecodecamp.org/LScottSavage" class="online-portfolios" id="profile-link" target="_blank" ><img src="" width="50px"></a> 
        
            <a class="online-portfolios" target="_blank" href="https://github.com/el-scott-savage"><img width="50px" src=""></a> 
      
            <a class="online-portfolios" target="_blank" href="https://www.linkedin.com/in/elscott-savage/"><img width="50px" src=""></a> 
        </div>
    </section>

</html>

@media screen and (max-width: 560px) {
    .profile-link-container {
        background-color: var(--color-pink);
    }
}
@media screen and (max-width: 600px) {
    #name {
        color: var(--color-bright-pink);
    }
}
#navbar {
    width: 25%;
    height: 120px;
    margin: 0;
    padding: 0;
    position: fixed;
    top: 0;
    right: 0;
    text-align: center;
    transition: all 0.5s ease;
    color: var(--color-pink);
}

Your browser information:

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

Challenge Information:

Personal Portfolio Webpage - Build a Personal Portfolio Webpage

2

Hello!
Your href should be styles.css, remove that slash in the beginning.

And you didn’t use your var() correctly.

You can learn about the var() here:

1 Like
3

Ahh, thank you. Removing that slash was all it took.

Would you kindly explain what you think was wrong with my var() ? I wonder because it behaves as intended, and though I visited the link you provided, I am not sure what the problem is. I used var() - CSS: Cascading Style Sheets | MDN as a resource. Are these different?

Thank you so much

4

You are welcome.
Your var color is pink right. But it is not displaying pink. You will need to add a :root selector with your var name and color. Like so:

:root {
  --main-bg-color: pink;
}

Happy coding!

5

Okay, and thanks again.

1 Like
6

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