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. If you link to another Pen, it will include the CSS from that Pen. If the preprocessor matches, it will attempt to combine them before processing.

+ add another resource

JavaScript

Babel is required to process package imports. If you need a different preprocessor remove all packages first.

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

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

              
                

<nav id="navbar">
  <header>Responsive Web Design - Media Queries </header>
   <li> <a class="nav-link" href="#What_is_a_Media_Query?">What is a Media Query?</a></li>
   <li> <a class="nav-link" href="#Add_a_Breakpoint">Add a Breakpoint</a></li>
    <li> <a class="nav-link" href="#Orientation:_Portrait_/_Landscape">Orientation: Portrait / Landscape </a></li>
    <li> <a class="nav-link" href="#Hide_Elements_With_Media_Queries">Hide Elements With Media Queries</a></li>
    <li> <a class="nav-link" href="#Change_Font_Size_With_Media_Queries">Change Font Size With Media Queries</a></li>
    <li> <a class="nav-link" href="#Reference">Reference</a></li>
  </nav>

<main id="main-doc">
  <section class="main-section" id="What_is_a_Media_Query?">
    <header>What is a Media Query?</header>
     <p>Media query is a CSS technique introduced in CSS3. The @media rule is used in media queries to apply different styles for different media types/devices. 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 (responsive web design) to desktops, laptops, tablets, and mobile phones.</p>
    <p>It uses the @media rule to include a block of CSS properties only if a certain condition is true. For example; If the browser window is 600px or smaller, the background color will be lightblue: <code>@media only screen and (max-width: 600px) {
  body {
    background-color: lightblue;
  }
}</code></p>
    </section>
  <section class="main-section" id="Add_a_Breakpoint">
    <header>Add a Breakpoint</header>
       <p>We can add a breakpoint where certain parts of the design will behave differently on each side of the breakpoint. Use a media query to add a breakpoint at 768px. When the screen (browser window) gets smaller than 768px, each column should have a width of 100%:</p>
       <code>
    /* For desktop: */
.col-1 {width: 8.33%;}
.col-2 {width: 16.66%;}
.col-3 {width: 25%;}
.col-4 {width: 33.33%;}
.col-5 {width: 41.66%;}
.col-6 {width: 50%;}
.col-7 {width: 58.33%;}
.col-8 {width: 66.66%;}
.col-9 {width: 75%;}
.col-10 {width: 83.33%;}
.col-11 {width: 91.66%;}
.col-12 {width: 100%;}

@media only screen and (max-width: 768px) {
  /* For mobile phones: */
  [class*="col-"] {
    width: 100%;
  }
}</code>
        <ul>
      <li>Always Design for Mobile First</li>
           <p>Mobile First means designing for mobile before designing for desktop or any other device (This will make the page display faster on smaller devices).

This means that we must make some changes in our CSS.

Instead of changing styles when the width gets smaller than 768px, we should change the design when the width gets larger than 768px. </p>
      <li>Another Breakpoint</li>
          <p>You can add as many breakpoints as you like.
We will also insert a breakpoint between tablets and mobile phones. There are tons of screens and devices with different heights and widths, so it is hard to create an exact breakpoint for each device. To keep things simple you could target five groups:</p>  </ul>
          <code>/* Extra small devices (phones, 600px and down) */
@media only screen and (max-width: 600px) {...} 

/* Small devices (portrait tablets and large phones, 600px and up) */
@media only screen and (min-width: 600px) {...} 

/* Medium devices (landscape tablets, 768px and up) */
@media only screen and (min-width: 768px) {...} 

/* Large devices (laptops/desktops, 992px and up) */
@media only screen and (min-width: 992px) {...} 

/* Extra large devices (large laptops and desktops, 1200px and up) */
@media only screen and (min-width: 1200px) {...}</code>
    </section>
    <section class="main-section" id="Orientation:_Portrait_/_Landscape">
    <header>Orientation: Portrait / Landscape</header>
     <p>Media queries can also be used to change layout of a page depending on the orientation of the browser.

You can have a set of CSS properties that will only apply when the browser window is wider than its height, a so called "Landscape" orientation. The web page will have a lightblue background if the orientation is in landscape mode:</p>
      <code>@media only screen and (orientation: landscape) {
  body {
    background-color: lightblue;
  }
}</code>
    </section>_
    <section class="main-section" id="Hide_Elements_With_Media_Queries">
    <header>Hide Elements With Media Queries</header>
       <p>Another common use of media queries, is to hide elements on different screen sizes:</p>
       <code>/* If the screen size is 600px wide or less, hide the element */
@media only screen and (max-width: 600px) {
  div.example {
    display: none;
  }
}</code>
    </section>
    <section class="main-section" id="Change_Font_Size_With_Media_Queries">
    <header>Change Font Size With Media Queries</header>
       <p>You can also use media queries to change the font size of an element on different screen sizes:</p>
       <code>/* If the screen size is 601px or more, set the font-size of div to 80px */
@media only screen and (min-width: 601px) {
  div.example {
    font-size: 80px;
  }
}

/* If the screen size is 600px or less, set the font-size of div to 30px */
@media only screen and (max-width: 600px) {
  div.example {
    font-size: 30px;
  }
}</code>
    </section>
 <section class="main-section" id="Reference">
   <header>Reference</header>
   <p>All the documentation in this page is taken from              <a class="link" href="https://www.w3schools.com/css/css_rwd_mediaqueries.asp"
            target="_blank">w3schools.com.</a</p>
         </section>
  </main>
              
            
!

CSS

              
                @import url('https://fonts.googleapis.com/css2?family=Caveat:wght@700&family=Handlee&family=Shadows+Into+Light&display=swap');
  
body {
  min-width: 290px;
  margin-left: 90px;
  color: #4d4e53;
  background-color: #FFE7EA;
  font-family: 'Handlee', cursive;
  line-height: 1.5;
}

header {
  font-size: 21px;
}
#main-doc {
  position: absolute;
  margin-left: 310px;
  padding: 20px;
  margin-bottom: 110px;
}

#navbar {
  position: fixed;
  min-width: 290px;
  top: 0px;
  left: 0px;
  width: 380px;
  height: 100%;
  border-right: solid;
  border-color: #E7EAFF;
}
#navbar li {
  color: #4d4e53;
  border-top: 1px;
  border-color: #FFCE27;
  list-style: none;
  position: relative;
  width: 100%;
  font-size: 18px;
}

#navbar li:hover {
  background-color: #FFEBEE;
  transition: #4d4e53;
  font-size: 20px;
}

#navbar a {
  display: block;
  padding: 10px 30px;
  color: #4d4e53;
  text-decoration: none;
  cursor: pointer;
}

code {
  display: block;
  text-align: left;
  white-space: pre;
  position: relative;
  line-height: 2;
  background-color: #E7EAFF;
  padding: 15px;
  margin: 10px;
  border-radius: 5px;
}
 a {
   text-decoration: none;
   color: #4d4e53; 
}
@media only screen and (max-width: 815px) {
  /* For mobile phones: */
  #navbar ul {
    border: 1px solid;
    height: 207px;
  }


              
            
!

JS

              
                
              
            
!
999px

Console