/* ----------- iPhone 5 and 5S ----------- */

/* Portrait and Landscape */
@media only screen and (max-device-width: 320px) and (-webkit-min-device-pixel-ratio: 2) {
  body{
    .page{

      header{
        background-size: 400px 100px;
      }
      #about-me{
        height: 500px;
      }
      .promo-container{
        ul{
          width: 200px;

          li{
          font-size: 10px
          }
        }
        .promo.three{
          ul{
          width: 200px;

          li{
          font-size: 8.75px
          }
        }

        }

      }
    }
  }

}

/* Portrait */
@media only screen and (min-device-width: 320px) and (max-device-width: 568px) and (-webkit-min-device-pixel-ratio: 2)and (orientation: portrait) {
}

/* Landscape */
@media only screen and (min-device-width: 320px) and (max-device-width: 568px) and (-webkit-min-device-pixel-ratio: 2)and (orientation: landscape) {

}
/* ----------- iPhone 5 and 5S ----------- */

/* Portrait and Landscape */
@media only screen and (max-device-width: 320px) and (-webkit-min-device-pixel-ratio: 2) and  (device-aspect-ratio: 40/71) {
  body{
    .page{

      header{
        background-size: 400px 100px;
      }
      #about-me{
        height: 500px;
      }
      .promo-container{
        ul{
          width: 200px;

          li{
          font-size: 10px
          }
        }
        .promo.three{
          ul{
          width: 200px;

          li{
          font-size: 8.75px
          }
        }

        }

      }
    }
  }

}

/* Portrait */
@media only screen and (min-device-width: 320px) and (max-device-width: 568px) and (-webkit-min-device-pixel-ratio: 2)and (orientation: portrait) {
}

/* Landscape */
@media only screen and (min-device-width: 320px) and (max-device-width: 568px) and (-webkit-min-device-pixel-ratio: 2)and (orientation: landscape) {

}
Add device aspec ratio to iphone 5 scss
Add device aspec ratio to iphone 5 scss
