metamaps--metamaps/app/assets/stylesheets/mobile.scss.erb

#mobile_header {
  display: none;
}

/* Smartphones (portrait and landscape) ----------- */
@media only screen and (max-device-width : 480px) {
  .upperLeftUI, .upperRightUI, .openCheatsheet, .mapInfoIcon, .uv-icon, .chat-box, #exploreMapsHeader {
    display: none !important;
  }
  
  #mobile_header {
    display: block;
  }
  
  .homeWrapper {
    width: 96%;
    padding: 0 2%;
  }
  .homeWrapper.homeText {
    margin-top: 80px;
  }
  .homeTitle {
    text-align: left;
  }
  .homeIntro {
    text-align: left;
  }
  .fullWidthWrapper.withVideo {
    height: auto;
  }
  .homeVideo {
    width: 100%;
    height: auto;
  }
  .fullWidthWrapper.withPartners {
    display: none;
  }
  .learnMoreCTA {
    display: none !important;
  }
  
  #yield {
    height: 100%;
  }
  
  .new_session, .new_user, .edit_user, .login, .forgotPassword {
    position: relative;
    top: auto;
    left: auto;
    width: 78%;
    padding: 16px 10%;
    margin: 50px auto 0 auto;
  }
  
  .centerGreyForm input[type="text"], .centerGreyForm input[type="email"], .centerGreyForm input[type="password"] {
    width: 100%;
  }
  
  .wrapper .mapInfoBox {
    position: fixed;
    top: 50px;
    right: 0px;
    bottom: auto;
    width: 100%;
    max-width: 360px;
  }
  
  #wrapper .requestInvite {
    width: 100%;
    padding: 0;
  }
  
  #exploreMaps > div {
    margin-top: 70px;
  }

  .map.newMap {
    a {
      height: auto;
    }

    .newMapImage {
      position: relative;
      display: inline-block;
      height: 40px;
      width: 40px;
      left: auto;
      top: auto;
      margin: 0 0 0 8px;
      background-size: 40px 80px;
      vertical-align: middle;
    }

    span {
      vertical-align: middle;
      padding: 16px;
      display: inline-block; 
    }
  }
  .map.newMap:hover .newMapImage {
    background-position: 0 -40px;
  }
}

/* Smartphones (portrait) ----------- */
@media only screen and (max-width : 400px) {

  .map {
    width: 100%;
    margin: 0 0 30px 0;
    height: auto;
  }
  
  .mapCard {
    height: auto;
  }
  
  .mapCard .title {
    text-align: left;
  }
  
  .mapCard .mapScreenshot {
    display: none;
  }

}

#mobile_header {
  height: 50px;
  background: #EEE;
  width: 100%;
  box-shadow: 0px 3px 3px rgba(0,0,0,0.23), 0 3px 3px rgba(0,0,0,0.16);
  position: fixed;
}

#menu_icon {
  width: 50px;
  height: 50px;
  border-right: 1px solid #DDD;
  position: absolute;
  background: #EEE url('<%= asset_path('menu-alt-256.png') %>') no-repeat center center;
  background-size: 30px;
}

#header_content {
  position: absolute;
  width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  padding: 0 10px 0 60px;
  font-size: 24px;
  line-height: 50px;
}

#mobile_menu {
 display: none;
  background: #EEE;
  position: fixed;
  top: 50px;
  border-top: 1px solid #DDD;
  padding: 10px;
  width: 200px;
  box-shadow: 3px 3px 3px rgba(0,0,0,0.23), 3px 3px 3px rgba(0,0,0,0.16);
}

#mobile_menu li {
  padding: 10px;
  list-style: none;
}

li.mobileMenuUser {
  border-bottom: 1px solid #BBB;
}

.mobileMenuUser img {
  display: inline-block;
  vertical-align: middle;
  margin-right: 10px;
  border-radius: 16px;
}