@media only screen and (min-width: 768px) { .column { float: left; width: 32%; } .timeline { float: right; width: 67%; } } .postcell { border: 1px solid red; text-align: left; margin: 0.25em 0 } .message { margin: 1em 1em 1em 3em; white-space: pre-wrap; word-wrap: break-word; } .buttons { margin-left: 1em; margin-bottom:0.5em; } .timestamp { text-align: right; margin: 0.5em } .hashtag { color: green; font-weight: bold; } .avatar { vertical-align: middle; width: 50px; height: 50px; } .column .profile { vertical-align: middle; padding-left: 10px; padding:1%; border:1px solid blue; } .column .profile .handle{ font-size: 1.1em; font-weight: bold; } .column .profile .email{ font-size: 0.8em; text-align:left; text-decoration:none; } .column .profile .bio { font-size: 0.9em; vertical-align: middle; margin: 1em } .gallery { margin:auto; display: flex; align-items: center; width: 100%; } .gallery .panel { margin: 2px; width: auto } .gallery .panel img { width: 100%; height: 100%; } .gallery .panel img:hover { border: 1px solid #777; filter: invert(100%); } .postcell .avatar { margin-left:3%; margin-top:2%; height: 4em; width:auto; vertical-align:top; } .postcell .wrapper { margin-top:2%; display: inline-block; } .postcell .wrapper .last-updated, .postcell .wrapper .post-count { font-size: 1em; color:grey; } .postcell .short-bio{ padding-left: 3%; padding-right: 2%; font-style: italic; word-wrap: break-word; } /* Clear floats after the columns */ .row:after { content: ""; display: table; clear: both; }