.prefs{ width: 60%; position: fixed; top:0px; right:0px; height: calc(100vh - 50px); display: flex; flex-direction: column; justify-content: flex-start; padding: 25px; background-color: white; overflow-y: scroll; } .prefsHeadWrapper{ width: 100%; display: flex; flex-direction: column; align-items: center; justify-content: center; } .prefsbg{ position: fixed; right: 0; top:0; width: 100%; height: 100vh; background-color: rgba(0,0,0,0.2); z-index: 1000000; } .hotelsCardWrapper{ display: flex; flex-direction: row; flex-wrap: wrap; gap:30px; height: 400px; justify-content: center; align-items: center; overflow-y: scroll; margin-bottom: 15px; } @media screen and (max-device-width: 700px) { .prefs{ width: calc(100% - 50px); } } @media screen and (max-device-width: 600px) { h2{ font-size: 16px; } } @media screen and (max-device-width: 500px) { }