.QVh0 { top:50px; z-index: 90; } .QVh1 { top:90px; z-index: 80; } .QVh2 { top:130px; z-index: 80; } .QuickView { position: fixed; bottom:0; overflow-y:auto; right:-100%; width:600px; background-color: white; z-index: 190; box-shadow: -5px 0 15px rgba(0, 0, 0, 0.6); transition:all 0.3s; box-sizing: border-box; border-top-left-radius: 20px; } .QVFooter { position: fixed; bottom:-80px; right:0; width:600px; z-index: 100; display: flex; align-content: center; align-items: center; justify-content: space-around; height:60px; box-sizing: border-box; text-align: center; background-color: white; box-shadow: 0px -2px 6px rgb(211, 212, 212); z-index: 90; -webkit-transition: all 0.3s; -moz-transition:all 0.3s; transition:all 0.2s; } .QVIcon { display:flex; } .QVFIcon { position:relative; display:flex; flex-flow: column; align-items: center; } .QVFIcon>div{position:relative;margin-top:-2px;top:-2px;font-size: 10px;color:rgb(80, 116, 179);} .QuickView > div:nth-child(1) { position:absolute; left:0; top:0; display:flex; justify-content:space-between; align-items: center; width:100%; box-sizing: border-box; cursor: pointer; color:white; background-color: #0da4eb; background: linear-gradient(#0da4eb,#0078af); font-size: 18px; font-weight: bold; height:40px; z-index: 3; padding:0 10px; box-shadow: 0 4px 5px rgba(0, 0, 0, 0.3); }  .QVPrint {position:relative;display:flex;font-size: 20px;width:40px;justify-content: center;align-items: center;} .QVClose {position:relative;display:flex;font-size: 20px;width:40px;justify-content: center;align-items: center;} .QuickView >div:nth-child(2) { position:absolute; display:block; width:100%; padding:10px; box-sizing: border-box; top:40px; bottom:0; overflow-y: auto; background-color: white; } @media screen and (max-width: 600px) { .QuickView { right:-110%; width:100%; border-top-left-radius: 0px; } .QVFooter{width:100%} .QVh0 {top:45px;} .QVh1 {top:85px;} .QVh2 {top:125px;} }