@media only screen and (max-width: 480px) { html, body { overflow: hidden !important; } body > header { margin-top: 64px; } .site-content { margin-left: 0px; overflow: scroll; } .now-playing { margin-left: 0px; position: fixed; width: 100%; bottom: 0; z-index: 1010; box-shadow: 0 0 8px rgba(0,0,0,0.5); } .user-details { position: fixed; top: 0; right: 0; z-index: 1002; } .mobile-header { display: block !important; position: absolute; z-index: 1001; background: #84528A; height: 64px; width: 100%; top: 0; .logo { text-align: center; vertical-align: middle; display: block; margin-left: auto; margin-right: auto; height: 40px; width: 160px; padding-top: 16px; > img { max-height: 75%; } } } .sidebar { left: -170px; transition: transform 0.5s ease; transform: translateX(0px) translateZ(0); perspective: 1000; backface-visibility: hidden; will-change: transform; z-index: 1011; height: ~"calc(100% - 64px)"; box-shadow: 0 8px 8px rgba(0,0,0,0.5); > a { display: none; } } .sidebar.active { transform: translateX(170px) translateZ(0); } .user-details > .avatar { border: 0 !important; box-shadow: initial !important; background: transparent !important; > img { border-radius: 20px; } > span { display: none !important; } } .track-player { margin-right: 0px !important; .buttons { li.volume, li.status { display: none; } } } input.search-input { border: 0; } .dropdowns { margin-bottom: 0px; > li { margin-bottom: 10px; > .btn { font-size: 10pt; } } } .details-columns { .cboxElement { display: none; } .right { float: none; padding: 0px; width: auto; } .left { margin-right: 0px; margin-left: 0px; margin-top: 10px; } } .stretch-to-bottom { overflow-y: initial !important; } }