.chat { border:1px solid #333; width:100%; background:#FFFFFF; color:#fff; max-height:85vh; overflow: auto; } .password-control { background: url(https://snipp.ru/demo/495/view.svg) 0 0 no-repeat; background-position: center; } .password-control.view { background-position: center !important; background: url(https://snipp.ru/demo/495/no-view.svg) 0 0 no-repeat; } #image-preview { width: 200px; height: 200px; } .nickname-avatar p { color:#FFFFFF; } .message { height: 100%; font-size:200%; background:gray; border-radius: 10px; } .input { font-family:arial; font-size:16px; vertical-align:middle; background:#333; color:#fff; display:inline-block; margin:1px; height:30px; } .chat-form__input { width:79%; } .chat-form__submit { width:18%; } .return a { margin-left:auto; font-size: 20px; height: 44px; width: 180px; vertical-align:middle; background-color:#000000 } .b-example-vr { flex-shrink: 0; width: 1.5rem; height: 100vh; } .cl2 { display:none; } .filters { position: -webkit-sticky; position: sticky; top: 0; height: 100vh; } .text-center{ margin-right:auto; margin-left:auto; } @media (max-width: 700px){ .cl1 { display:none; } .cl2 { display:block; } .chat { height: 60vh; overflow: auto; } .list-group button { font-size: 12px; } } @media (max-width: 300px){ .list-group a { font-size: 10px; } .list-group h6 { font-size: 10px; } .list-group .postImage img { width: 100px; height: 100px; } .list-group img { width: 20px; height: 20px; } .list-group button { font-size: 6px; } }