@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; } .profile { vertical-align: middle; padding-left: 10px; border:1px solid blue; } .avatar { vertical-align: middle; width: 50px; height: 50px; } .handle{ font-size: 1.1em; font-weight: bold; } .email{ text-align:left; font-size: 0.8em; text-decoration:none; } .bio { vertical-align: middle; font-size: 0.9em; 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%); } /* Clear floats after the columns */ .row:after { content: ""; display: table; clear: both; }