Pen Settings

HTML

CSS

CSS Base

Vendor Prefixing

Add External Stylesheets/Pens

Any URL's added here will be added as <link>s in order, and before the CSS in the editor. You can use the CSS from another Pen by using it's URL and the proper URL extention.

+ add another resource

JavaScript

Babel includes JSX processing.

Add External Scripts/Pens

Any URL's added here will be added as <script>s in order, and run before the JavaScript in the editor. You can use the URL of any other Pen and it will include the JavaScript from that Pen.

+ add another resource

Packages

Add Packages

Search for and use JavaScript packages from npm here. By selecting a package, an import statement will be added to the top of the JavaScript editor for this package.

Behavior

Save Automatically?

If active, Pens will autosave every 30 seconds after being saved once.

Auto-Updating Preview

If enabled, the preview panel updates automatically as you code. If disabled, use the "Run" button to update.

Format on Save

If enabled, your code will be formatted when you actively save your Pen. Note: your code becomes un-folded during formatting.

Editor Settings

Code Indentation

Want to change your Syntax Highlighting theme, Fonts and more?

Visit your global Editor Settings.

HTML

              
                <script src="https://cdn.freecodecamp.org/testable-projects-fcc/v1/bundle.js"></script>

<body>
  <nav id="navbar">
    <header><h1>CSS Media Queries</h1></header>
    <ul>
      <li>
        <a class="nav-link first-nav-link" href="#CSS2_Introduced_Media_Types">CSS2 Introduced Media Types</a>
      </li>
      <li>
        <a class="nav-link" href="#CSS3_Introduced_Media_Queries">CSS3 Introduced Media Queries</a>
      </li>
      <li>
        <a class="nav-link" href="#Browser_Support">Browser Support</a>
      </li>
      <li>
        <a class="nav-link" href="#Media_Query_Syntax">Media Query Syntax</a>
      </li>
      <li>
        <a class="nav-link" href="#CSS3_Media_Types">CSS3 Media Types</a>
      </li>
      <li>
        <a class="nav-link" href="#Media_Queries_Simple_Examples">Media Queries Simple Examples</a>
      </li>
      <li>
        <a class="nav-link" href="#Reference">Reference</a>
      </li>
    </ul>
  </nav>
  <main id="main-doc">
    <section class="main-section" id="CSS2_Introduced_Media_Types">
      <header><h2>CSS2 Introduced Media Types</h2></header>
      <p>The <code>@media</code> rule, introduced in CSS2, made it possible to define different style rules for different media types.</p>
      <p>Examples: You could have one set of style rules for computer screens, one for printers, one for handheld devices, one for television-type devices, and so on.</p>
      <p>Unfortunately these media types never got a lot of support by devices, other than the print media type.</p>
    </section>
    <section class="main-section" id="CSS3_Introduced_Media_Queries">
      <header><h2>CSS3 Introduced Media Queries</h2></header>
      <p>Media queries in CSS3 extended the CSS2 media types idea: Instead of looking for a type of device, they look at the capability of the device.</p>
      <p>Media queries can be used to check many things, such as:</p>
      <ul>
        <li>width and height of the viewport</li>
        <li>width and height of the device</li>
        <li>orientation (is the tablet/phone in landscape or portrait mode?)</li>
        <li>resolution</li>
      </ul>
      <p>Using media queries are a popular technique for delivering a tailored style sheet to desktops, laptops, tablets, and mobile phones (such as iPhone and Android phones).</p>
    </section>
    <section class="main-section" id="Browser_Support">
      <header><h2>Browser Support</h2></header>
      <p>The numbers in the table specifies the first browser version that fully supports the <code>@media</code> rule.</p>
      <table>
        <tr>
          <th>Property</th>
          <th><img src="https://res.cloudinary.com/db6e0gluw/image/upload/v1547466681/FCC/Front%20End%20Projects/Technical%20Documentation%20Page/chrome_128x128.png" alt="chrome-icon"></th>
          <th><img src="https://res.cloudinary.com/db6e0gluw/image/upload/v1547466681/FCC/Front%20End%20Projects/Technical%20Documentation%20Page/edge_128x128.png" alt="edge-icon"></th>
          <th><img src="https://res.cloudinary.com/db6e0gluw/image/upload/v1547466681/FCC/Front%20End%20Projects/Technical%20Documentation%20Page/firefox_128x128.png" alt="firefox-icon"></th>
          <th><img src="https://res.cloudinary.com/db6e0gluw/image/upload/v1547466681/FCC/Front%20End%20Projects/Technical%20Documentation%20Page/safari_128x128.png" alt="safari-icon"></th>
          <th><img src="https://res.cloudinary.com/db6e0gluw/image/upload/v1547466681/FCC/Front%20End%20Projects/Technical%20Documentation%20Page/opera_128x128.png" alt="opera-icon"></th>
        </tr>
        <tr>
          <td>@media</td>
          <td>21.0</td>
          <td>9.0</td>
          <td>3.5</td>
          <td>4.0</td>
          <td>9.0</td>
        </tr>
      </table>
    </section>
    <section class="main-section" id="Media_Query_Syntax">
      <header><h2>Media Query Syntax</h2></header>
      <p>A media query consists of a media type and can contain one or more expressions, which resolve to either true or false.</p>
      <div class="example_container">
        <p>Example</p>
        <div class="example_code_container">
          <code><span class="media_span">@media</span> not|only <span class="madiatype_span">mediatype</span> and (<span class="expressions_span">expressions</span>) { <br>  &nbsp <span class="expressions_span">CSS-Code</span>; <br> }</code>
        </div>
      </div>
      <p>The result of the query is true if the specified media type matches the type of device the document is being displayed on and all expressions in the media query are true. When a media query is true, the corresponding style sheet or style rules are applied, following the normal cascading rules.</p>
      <p>Unless you use the not or only operators, the media type is optional and the all type will be implied.</p>
      <p>You can also have different stylesheets for different media:</p>
      <div class="example_code_container">
        <code><span class="grey_code_span">&lt</span><span class="blue_code_span">link</span> <span class="expressions_span">rel</span>=<span class="madiatype_span">"stylesheet"</span> <span class="expressions_span">media</span>=<span class="madiatype_span">"mediatype and|not|only (expressions)"</span> <span class="expressions_span">href</span>=<span class="madiatype_span">"print.css"</span><span class="grey_code_span">&gt</span></code>
      </div>
    </section>
    <section class="main-section" id="CSS3_Media_Types">
      <header><h2>CSS3 Media Types</h2></header>
      <table>
        <tr>
          <th>Value</th>
          <th class="media_types_table_column">Description</th>
        </tr>
        <tr>
          <td>all</td>
          <td class="media_types_table_column">Used for all media type devices</td>
        </tr>
        <tr>
          <td>print</td>
          <td class="media_types_table_column">Used for printers</td>
        </tr>
        <tr>
          <td>screen</td>
          <td class="media_types_table_column">Used for computer screens, tablets, smart-phones etc.</td>
        </tr>
        <tr>
          <td>speech</td>
          <td class="media_types_table_column">Used for screenreaders that "reads" the page out loud</td>
        </tr>
      </table>
    </section>
    <section class="main-section" id="Media_Queries_Simple_Examples">
      <header><h2>Media Queries Simple Examples</h2></header>
      <p>One way to use media queries is to have an alternate CSS section right inside your style sheet.</p>
      <p>The following example changes the background-color to lightgreen if the viewport is 480 pixels wide or wider (if the viewport is less than 480 pixels, the background-color will be pink):</p>
      <div class="example_container">
        <p>Example</p>
        <div class="example_code_container">
          <code><span class="media_span">@media</span> <span class="madiatype_span">screen</span> and (<span class="expressions_span">min-width</span>: <span class="green_code_span">480px</span>) {<br>&nbsp <span class="madiatype_span">body</span> {<br>&nbsp &nbsp <span class="expressions_span">background-color</span>: <span class="madiatype_span">lightgreen</span>;<br>&nbsp&nbsp}<br>}</code>
        </div>
      </div>
      <p>The following example shows a menu that will float to the left of the page if the viewport is 480 pixels wide or wider (if the viewport is less than 480 pixels, the menu will be on top of the content):</p>
      <div class="example_container">
        <p>Example</p>
        <div class="example_code_container">
          <code><span class="media_span">@media</span> <span class="madiatype_span">screen</span> and (<span class="expressions_span">min-width</span>: <span class="green_code_span">480px</span>) { <br>&nbsp <span class="madiatype_span">#leftsidebar</span> {<br>&nbsp &nbsp <span class="expressions_span">width</span>: <span class="green_code_span">200px</span>; <br>&nbsp &nbsp <span class="expressions_span">float</span>: <span class="madiatype_span">left</span>;<br>&nbsp } <br>&nbsp <span class="madiatype_span">#main</span> {<br>&nbsp &nbsp <span class="expressions_span">margin-left</span>: <span class="green_code_span">216px</span>;<br>&nbsp } <br>}</code>
        </div>
      </div>
    </section>
    <section class="main-section" id="Reference">
      <header><h2>Reference</h2></header>
      <ul>
        <li>For a full overview of all the media types and features/expressions, please look at the <a class="reference_link" href="https://www.w3schools.com/cssref/css3_pr_mediaquery.asp" target="_blank">@media rule in w3schools CSS reference</a>.</li>
        <li>All the documentation in this page is taken from <a class="reference_link" href="https://www.w3schools.com/css/css3_mediaqueries.asp" target="_blank">w3schools.com</a></li>
      </ul>
    </section>
  </main>
</body>
              
            
!

CSS

              
                body {
  color: #333333;
  font-size: 1.2em;
  font-family: Helvetica, sans-serif;
  margin: 0px;
}
/* ----------------------------------------------------- navbar CSS */
nav {
  border-bottom: 3px solid grey;
}
nav>ul {
  list-style-type: none;
  padding: 0px;
  margin: 0px;
  height: 10rem;
  overflow: auto;
}
nav>ul>li:hover {
  background-color: #e6e6e6;
}
header>h1 {
  padding: 1rem;
  margin: 1rem;
  text-align: center;
}
.nav-link {
  display: block;
  padding: 1rem;
  text-decoration: none;
  color: #333333;
  border-bottom: 1px solid lightgrey;
}
.first-nav-link {
  border-top: 1px solid lightgrey;
}
/* ----------------------------------------------------- main CSS */
main {
  padding: 1rem;
}
code {
  padding:0.25rem;
  color: white;
}
p>code {
  color: #ff66ff;
  background-color: #4d4d4d;
}
.example_container {
  background-color: #e6e6e6;
  padding: 1rem;
}
.example_container>p {
  margin-top: 0px;
  margin-bottom: 1rem;
}
.example_code_container {
  background-color: #4d4d4d;
  padding: 1rem;
  border-left: 4px solid #0088cc;
}
.media_span {
  color: #ff66ff;
}
.madiatype_span {
  color: #ffb366;
}
.expressions_span {
  color: #99d6ff;
}
.green_code_span {
  color: #b3ffb3;
}
.grey_code_span {
  color: #bfbfbf;
}
.blue_code_span {
  color: #0088cc;
}
h2 {
  padding: 2rem;
}
table {
  width: 100%;
  border-collapse: collapse;
}
th:first-child, td:first-child {
  text-align: left;
}
th, td {
  border: 1px solid grey;
  padding: 0.5rem;
  text-align: center;
}
.media_types_table_column {
  text-align: left;
}
td {
  background-color: #f2f2f2;
}
img {
  height: 2rem;
  margin-left: auto;
  margin-right: auto;
  display: block;
}
.reference_link:link {
  text-decoration: underline;
  color: black;
}
.reference_link:visited {
  text-decoration: underline;
  color: black;
}
.reference_link:hover {
  text-decoration: none;
  color: #333333;
}
/* ---------------------------------------------------------------------------------------------------- For screens wider than 1280px */
@media only screen and (min-width: 1280px) {
  nav {
    border-bottom: none;
    position: fixed;
  }
  nav>ul {
    height: 100%;
  }
  main {
    margin-left: 20.5rem;
    border-left: 3px solid grey;
  }
}
              
            
!

JS

              
                
              
            
!
999px

Console