Flappy App Inline Media Queries

gistfile1.scss

// Your markup may be different. The following styles only apply for this markup snippet:

//   <header id="page_header">
//     <div class="row">
//       <div class="large-6 medium-3 small-12 columns">
//         <div class="title">
//           <h1>
//             <span class="flappy">flappy</span>
//             <span class="app">app</span>
//           </h1>
//           <div class="bird_img"></div>
//         </div>
//       </div>
      
//       <div class="large-6 medium-9 hide-for-small columns">
//         <div class="header_content">
//             <ul class="clearfix">
//               <li><a href="#">about</a></li>
//               <li><a href="#">specs</a></li>
//               <li><a href="#">pricing</a></li>
//               <li><a href="#">contact</a></li>
//               <li><a href="#">sign up</a></li>
//             </ul>
//         </div>
//       </div>
//     </div>
//   </header> 

// you need to:
// 1. uncomment the media query section in the _settings.scss file
// 2. define $medium-down in the _settings.scss file

@import "http://fonts.googleapis.com/css?family=Lato:300,700.css";
@import "partials/settings";
@import "../public/bower_components/foundation/scss/foundation.scss";

body{
  background-color: pink;

  @media #{$large-up}{
    background-color: red;
  }

  @media #{$medium-only}{
    background-color: green;
  }

  @media #{$small-only}{
    background-color: blue;
  }
}

#page_header {
  background-color: #444;

  @media #{$large-up}{
    height: 130px;
  }

  @media #{$medium-only}{
    height: 110px;
  }

  @media #{$small-only}{
    height: 60px;
  }

  .title{
    h1{

      @media #{$large-up}{
        margin-top: 30px;
      }

      @media #{$medium-only}{
        margin-top: 30px;
      }

      @media #{$medium-down}{
        margin-left: 90px;
      }
      span{
        color: white;
        text-transform: uppercase;
        font-weight: bold;

        @media #{$large-up}{
          font-size: 50px;
        }

        @media #{$medium-only}{
          display: block;
        }

        @media #{$medium-down}{
          font-size: 18px;
        }

        &.flappy{

        }
        &.app{
          
          @media #{$large-up}{
            margin-left: 75px;
          }
        }
      }
    }
    .bird_img {
      border: 2px dashed pink;
      position: absolute;

      @media #{$large-up}{
        top: 35px;
        left: 190px;
        width: 100px;
        height: 65px;
      }

      @media #{$medium-only}{
        top: 30px;
        width: 80px;
        height: 50px;
      }

      @media #{$small-only}{
        top: 10px;
        width: 80px;
        height: 50px;
      }
    }
  }

  .header_content{
    ul {
      margin-top: 45px;
      float: right;
      li {
        display: block;
        float: left;
        a{
          color: white;
        }
      }
    }
  }
}

Don't copy this verbatim... it might not work for your markup. Please just refer to this as an example of inline media queries.