.omessage { background-color: #fff; border: 0px solid #e5e5ea; border-radius: 0.25rem; display: flex; flex-direction: row; flex: 1 3; margin: 0 auto 1rem; padding: 0.5rem 1.5rem; max-width: 100%; } .messagephoto { position:relative; max-width: 30%; vertical-align:bottom; } .imessage { background-color: #fff; display: flex; flex-direction: column; font-size: 1.25rem; margin: 0; padding: 0.5rem 1.5rem; } .imessage p { border-radius: 1.15rem; line-height: 1.25; max-width: 100%; padding: 0.5rem 0.875rem; position: relative; word-wrap: break-word; } .imessage p::before, .imessage p::after { bottom: -0.1rem; content: ""; height: 1rem; position: absolute; } p[class^="from-"] { margin: 0.5rem 0; } p.from-them { align-items: flex-start; background-color: #149bf5; color: #fff; } p.from-them:before { border-bottom-right-radius: 0.8rem 0.7rem; border-left: 1rem solid #149bf5; left: -0.35rem; transform: translate(0, -0.1rem); } p.from-them::after { background-color: #fff; border-bottom-right-radius: 0.5rem; left: 20px; transform: translate(-30px, -2px); width: 10px; } @media screen and (max-width: 800px) { .messagephoto { position:relative; min-width:90px; vertical-align:bottom; } .imessage { margin: 0 auto 1rem; max-width: 600px; padding: 0.25rem 0.875rem; } .imessage p { margin: 0.5rem 0; } .dontshowmobile { display:none; } }