Technical Documentation Page - Build a Technical Documentation Page

HTML-CSS
1

Tell us what’s happening:

I just can’t make the media query to work. Can anyone help?

Your code so far

<!-- file: index.html -->
<main id="main-doc">
  <nav id="navbar">
    <header>Tech Details</header>
    <a href="#Section_the_First" class="nav-link">Section the First</a>
    <a href="#Section_the_Second" class="nav-link">Section the Second</a>
    <a href="#Section_the_Third" class="nav-link">Section the Third</a>
    <a href="#Section_the_Fourth" class="nav-link">Section the Fourth</a>
    <a href="#Section_the_Fifth" class="nav-link">Section the Fifth</a>
  </nav>
    <section id="Section_the_First" class="main-section">
        <header>Section the First</header>
        <p></p>
        <p></p>
        <code></code>
        <li></li>
    </section>
    <section id="Section_the_Second" class="main-section">
        <header>Section the Second</header>
        <p></p>
        <p></p>
        <code></code>
        
        <li></li>
    </section>
    <section id="Section_the_Third" class="main-section">
        <header>Section the Third</header>
        <p></p>
        <p></p>
        <code></code>
        <li></li>
    </section>
    <section id="Section_the_Fourth" class="main-section">
        <header>Section the Fourth</header>
        <p></p>
        <p></p>
        <code></code>
        <li></li>
    </section>
    <section id="Section_the_Fifth" class="main-section">
        <header>Section the Fifth</header>
        <p></p>
        <p></p>
        <code></code>
        <li></li>
    </section>
  </main>

/* file: styles.css */
#navbar {
  text-aling: left;
}

@media (max-width: 600px) {
  section {
    background-color: gray;
  }
}

Your browser information:

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

Challenge Information:

Technical Documentation Page - Build a Technical Documentation Page

2

You have a typo in your “text-align” style property. Try changing that.
Also, make sure you’ve actually linked you style.css file.

Other than that, the code wors fine for me. I’m not sure what’s wrong.

image
image845×387 13.7 KB

image

1 Like
3

Despite the typo, the problem remains with the media query :confused:
But thanks for your input :slight_smile:

1 Like
4

@rdg86
I usually write my media queries like this:

@media only screen and (max-width: value) {}

here’s an explanation of the differences:

However, it doesnt seem to be the problem either. I’ve tried writing the code in my project to see if anything is wrong, it all seems to work. Again, make sure you’ve linked your stylesheet properly. A single typo can cause a lot of problems.

1 Like
5

No good as well… I’ll keep looking but thanks again mate :slight_smile:

1 Like
6

@rdg86 It’s beggining to look more like a freecodecamp or even browser problem. Sorry that I can’t help out. :pray:

7

Hello!

Your HTML is missing the link to the CSS file.

Challenge accepted this simple head section without the rest of the usual HTML code and passed the test:

<head>
<link ref="stylescss" href="styles.css" />  
</head>
8

Correction

<link rel="stylesheet"

@DanielHuebschmann

9

Thanks guys. I inserted the link to the CSS, but the media problem persistis…

10

Example

@media only screen and (max-width:value) {element goes here you want to styles {your properties and value for the CSS styleing goes here}}

@rdg86

11

I did that as well mate. it is on my code. Nothing seems to work now…

12

Strange, I got all tests passed after connecting HTML/CSS files.

Can you please provide the updated code for us to test it? Include every line you have.

13

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