Technical Documentation Page - Build a Technical Documentation Page

HTML-CSS
1

Tell us what’s happening:
Your Technical Documentation project should use at least one media query.

What is ‘media query’?

  **Your code so far**

/* file: index.html */

<!DOCTYPE html>
<html lang"en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale 1.0">
<title>Technical stuff</title>
  <link rel="stylesheet" href="styles.css">
  </head>
<body>

<main id="main-doc">
<section class="main-section" id="head">
  <header>Head</header>
<section class="main-section" id="tail">
  <header>Tail</header>
<section class="main-section" id="center">
  <header>center</header>
<section class="main-section" id="right">
  <header>right</header>
<section class="main-section" id="left">
  <header>left</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>
  <nav id="navbar" href="">
    <header>Trail</header>
    <a class="nav-link" href="#head">head</a>
    
    <a class="nav-link" href="#tail">tail</a>
    
    <a class="nav-link" href="#center">center</a>
      
    <a class="nav-link" href="#right">right</a>

    <a class="nav-link" href="#left">left</a>
    </main>
    </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/105.0.0.0 Safari/537.36 Edg/105.0.1343.33

Challenge: Technical Documentation Page - Build a Technical Documentation Page

Link to the challenge:

2

Hi @Tai

You’ve learned it here in this step

Take a look back again on what it does!

3

Still no clue at all!

4

It is a piece of code that you wrap around CSS rules that makes it so that it only obey those CSS rules under certain condition.

@media only screen and (max-width: 600px) {
    p {
       color: green
    }
}

For example, the code above means that all paragraph color will be green IF the screen is below 600px. The way that is being read is : “Follow these CSS rules but only follow it until screen width passes 600px. If It is more than 600px, we don’t follow the CSS rules anymore”

5

Really sorry! I am still lost.

6

Hei @Tai
Which part do you not understand? I can’t really help you here if I don’t even know which part you don’t understand

7

I don’t know how to apply it although I do understand what is ‘media query’.

8

Tell us what’s happening:
Your Technical Documentation project should use at least one media query.

I don’t know how to apply it although I do understand what is ‘media query’.

  **Your code so far**

/* file: index.html */
<main id="main-doc">
<section class="main-section" id="head">
  <header>Head</header>
<section class="main-section" id="tail">
  <header>Tail</header>
<section class="main-section" id="center">
  <header>center</header>
<section class="main-section" id="right">
  <header>right</header>
<section class="main-section" id="left">
  <header>left</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>
  <nav id="navbar" href="">
    <header>Trail</header>
    <a class="nav-link" href="#head">head</a>
    
    <a class="nav-link" href="#tail">tail</a>
    
    <a class="nav-link" href="#center">center</a>
      
    <a class="nav-link" href="#right">right</a>

    <a class="nav-link" href="#left">left</a>
    
      
      
    

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

}
@media ???


  **Your browser information:**

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

Challenge: Technical Documentation Page - Build a Technical Documentation Page

Link to the challenge:

9

Hi!

Here’s a working example of a media query. If you resize your browser window to be smaller, you will notice the square change colour from blue to yellow.

If you look at the code, the .square class is targeted by the media query so it takes effect.

@media only screen and (max-width: 600px) {
    .square {
       background-color: blue;
    }
}

You apply a media query by writing the elements you want targeted inside the media query code. Hope this helps!

10

:sparkling_heart: Got it! Thank you for your time.

1 Like
11

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