BuzzApp | Small Breakpoint

buzz-small.css

/* Small Breakpoint Styles - CSS */

@media only screen and (max-width: 768px) {

  /* Typography */
  h2 {
    font-size: 26px;
    line-height: 26px;
  }

  h4.subheader {
    font-size: 16px;
    line-height: 21px;
    font-weight: normal;
  }

  blockquote {
    padding: 42px 3% 0;
  }
  blockquote p, blockquote cite {
    font-size: 21px;
    line-height: 34px;
  }
  
  /* Navigation */
  nav ul {
    margin: 0;
    float: none;
    overflow: hidden;
  }
  nav ul li {
    width: 33.3%;
    text-align: center;
    margin: 0;
  }
  footer nav ul.columns {
    margin: 0;
    padding: 0;
  }
  footer nav ul.columns li {
    width: 33.3% !important;
    text-align: center;
    margin: 0;
  }
  footer nav section {
    margin-top: 26px;
  }
  footer nav section p {
    text-align: center;
  }

  /* Header */
  #mast {
    background: url('../images/header-bg-sm.png?1345606671') top center no-repeat !important;
    padding: 0 3%;
  }

  header section h1 {
    text-align: center;
    margin: 42px 0 21px;
  }
  header section nav {
    margin-bottom: 42px;
  }
  header hgroup {
    width: 53%;
    text-align: center;
  }
  header hgroup h2 {
    margin-top: 68px !important;
  }
  
  /* Features */
  #features {
    padding-top: 90px;
  }
  #features article {
    padding-top: 0 !important;
    margin-bottom: 16px;
  }
  #features article.proof1, #features article.proof2, #features article.proof3, #features article.proof4 {
    background-image: none;
  }

  /* Testimony */
  #testimony {
    margin-top: 26px !important;
  }

  /* Footer */
  footer nav section.columns {
    padding: 0 !important;
  }

}

@media only screen and (max-width: 500px) {
  #mast {
    background: url('../images/header-bg-tny.png?1345608795') top center no-repeat !important;
    padding: 0 3%;
  }
}

------------------------------------------------------

/* Small Breakpoint Styles - SCSS */

@media only screen and (max-width: 768px) {

  /* Typography */

  h2 {
    font-size: ms(2);
    line-height: ms(2);
  }
  h4.subheader {
    font-size: ms(0);
    line-height: ms(1);
    font-weight: normal;
  }

  blockquote {
    padding: ms(4) 3% 0;
    p, cite {
      font-size: ms(1);
      line-height: ms(3);
    }
  }

  /* Navigation */
  nav {
    ul {
      margin: 0;
      float: none;
      overflow: hidden;
      li {
        width: 33.3%;
        text-align: center;
        margin: 0;      
      }
    }
    footer & {
      ul.columns {
        margin: 0;
        padding: 0;
        li {
          width: 33.3% !important;
          text-align: center;
          margin: 0;
        }
      }
      section {
        margin-top: ms(2);
        p {
          text-align: center;
        }
      }
    }
  }

  /* Header */
  #mast {
    background: image-url('header-bg-sm.png') top center no-repeat !important;
    padding: 0 3%;
  }
  header {
    section {
      h1 {
        text-align: center;
        margin: ms(4) 0 ms(1);
      }
      nav {
        margin-bottom: ms(4);
      }
    }
    hgroup {
      width: 53%;
      text-align: center;
      h2 {
        margin-top: ms(6) !important;
      }
    }
  }

  /* Features */
  #features {
    padding-top: ms(7);
    article {
      padding-top: 0 !important;
      margin-bottom: ms(0);
      &.proof1, &.proof2, &.proof3, &.proof4 {
        background-image: none;
      }
    }
  }

  /* Testimony */
  #testimony {
    margin-top: ms(2) !important;
  }

  /* Footer */
  footer nav section.columns {
    padding: 0 !important;
  }
 
}

@media only screen and (max-width: 500px) {
  #mast {
    background: image-url('header-bg-tny.png') top center no-repeat !important;
    padding: 0 3%;
  }
}