body { color: #373a3c; background-color: #f9f9f9; } * { border-radius: 0 !important; } .container { max-width: 700px; box-shadow: 0 2px 3px rgba(0, 0, 0, .05); background-color: #fff; border: 1px solid #eee; padding: 15px; } .users { border-right: 1px solid #eee; float: left; width: 140px; } .users ul { height: 250px; overflow-y: scroll; margin: 0; } .users h4 { margin: 0; border-bottom: 1px solid #eee; padding-bottom: 3px; margin-bottom: 5px; } ::-webkit-scrollbar { width: 5px; } ::-webkit-scrollbar-thumb { background: #666; } .chat { width: 528px; float: left; padding-left: 15px; position: relative; height: 278px; } .chat .messages ul { height: 240px; margin: 0; overflow-y: scroll; padding-top: 5px; } .chat .messages ul li .name { font-size: 12px; font-weight: bold; margin-bottom: 5px; } .chat .messages ul li { margin-bottom: 10px; } .chat .messages ul li span { border-radius: 5px !important; background: #E0EDFF; padding: 5px 12px; font-size: 15px; } .chat .messages ul li.me { text-align: right; margin-right: 10px; } .chat .input { position: absolute; bottom: 0; } @media screen and (max-width: 768px) { body, html { position: relative; width: 100%; height: 100%; } #join .btn { display: block; width: 100%; } .container { position: absolute; width: 100%; height: 89%; } h1 { margin: 4% 0; } .users { display: none; } .chat { float: none; padding: 0; height: 100%; width: 100%; position: absolute; } .chat .messages { height: 90%; } .chat .messages ul { height: 100%; } #group { height: 100%; position: relative; } }