Technical Documentation Page - Build a Technical Documentation Page

HTML-CSS
1

Tell us what’s happening:

When I try to add a media query, it doesn’t accept it, help! What do I do?

Your code so far

<!-- file: index.html -->
<!-- file: index.html -->
<!DOCTYPE html>
  <html lang="en">
      <head>
        <meta charset="UTF-8">
    <link rel="stylesheet" href="styles.css">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
      <title>How To Build Your House</title>
   <style>
    @media screen and (max-width: 350px) {
            body {
        font-size: 16px;
      }
    }
    </style>
    <link rel="stylesheet">
<a href="styles.css" id="how_to_build_your_house" target="_blank"></a>
  </head>
    <body class="body">
<div class="navbar">
      <nav id="navbar">
        <header><h3>How To Build Your House</h3></header>

        <ul>

        <li><a class="nav-link"  href="#Climate_Considerations"> <b>Climate Considerations</b></a></li>
        <li><a class="nav-link"  href="#Expected_Cost"> <b>Expected Cost</b></a></li>
        <li><a class="nav-link"  href="#Construction_Timeline"><b>Construction Timeline</b></a></li>
        <li><a class="nav-link"  href="#Helpful_Tips"><b>Helpful Tips</b></a></li>
        <li><a class="nav-link"  href="#Be_Patient"><b>Be Patient</b></a></li>

        </ul>
        
      </nav>
    </div>

<main id="main-doc">
    
    <section class="main-section" id="Climate_Considerations">
      <header><h2>Climate Considerations</h2></header>
    <p></p>

</section>

    
    <section class="main-section" id="Expected_Cost">
      <header><h2>Expected Cost</h2></header>
      <p></p>
      <p></p>
      <p></p>
      <p></p>
      <p></p>
      <p></p>
      <p></p>
      <p></p>
      <p></p>
      <p></p>
      <code></code>
      <code></code>
      <code></code>
      <code></code>
      <code></code>
      <li></li>
      <li></li>
      <li></li>
      <li></li>
      <li></li>
    </section>
    
    
    <section class="main-section" id="Construction_Timeline">      
      <header><h2>Construction Timeline</h2></header>
    <p></p>

    
    <section class="main-section" id="Helpful_Tips">
      <header><h2>Helpful Tips</h2></header>
    <p></p>
    </section>

    
    <section class="main-section" id="Be_Patient">
      <header><h2>Be Patient</h2></header>
    <p></p></section>
    </body>
    </html>

/* file: styles.css */

Your browser information:

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

Challenge Information:

Technical Documentation Page - Build a Technical Documentation Page

2

Hi there!

You didn’t need to add media query within the style tags. Remove that style tags and media query styling from html file and add media query to the styles.css file. @duaaezainab76

3

Hello duaaezainab76

Along with the good guidance provided by hasanzaib76, you may wish to take a look at correcting the link here.

to the one provided in the instructions.

<link rel="stylesheet" href="styles.css">

Wishing you good progress on your coding journey. :slightly_smiling_face:

1 Like
4

Hey! Thank you so much for the advice, I just realized I made so many mistakes actually.

2 Likes
5

Yes, I’m rechecking the entire code, a lot of mistakes I didn’t realize XD thanks

1 Like
6

Keep up the good progress, and great job at looking to debug your code to correct the issues.

Wishing you more good progress on your coding journey. :slightly_smiling_face: