#thread_container { height: 500px; border: solid 1px #ccc; padding: 12px; overflow: auto; overflow-x: hidden; overflow-y: auto; position: relative; } #message_thread .conv_message { margin-bottom: 10px; transition: background 1s, outline 1s; background: #fff; outline: solid 2px #fff; } #message_thread .message_details { font-size: 1rem; margin: 2px; color: #666; } #message_thread .message_details div { display: inline-block; margin-right: 5px; } #message_thread .sender:before { content: "Sent By "; } #message_thread .message { padding: 7px 10px; font-size: 1.4rem; min-height: 40px; line-height: 2.7rem; } #message_thread .conv_message.to_user { margin-right: 10%; } #message_thread .conv_message.from_user { margin-left: 10%; } #message_thread .conv_message.to_user .message { border: solid 5px #aebdd7; background: #fcfcfc; border-radius:0px 1rem 1rem 0px; } #message_thread .conv_message.from_user .message { border: solid 5px #efe3ca; border-radius:1rem 0px 0px 1rem; background: #fcfcfc; } #message_thread .conv_message:before, #message_thread .conv_message:after { content: ""; clear: both; display: block; } #message_thread .conv_message.unread { background: #d78d8b; outline: solid 2px #d78d8b; } @media (max-width:800px){ #thread_container{ margin-right:-3.1rem; margin-left:-3.1rem; height: 220px; padding: 1rem 0px; } #thread_container{ } }