<div class="author">
	<img class="author__item author__pic" src="https://en.gravatar.com/userimage/137371786/7395c6c605915c6315f96d8cd8f6ada9.jpg?size=200" alt="my face"/>
	<div class="author__item author__name">
		<b class="author__heading">Author:</b><br/>
		<a class="author__link" rel="author" href="//brettanda.ca" target="_blank">Brett Anda</a>
	<div class="author__item author__date">
		<b class="author__heading">Date Posted:</b><br/>
.author {
	display: flex;
	flex-flow: row wrap;
	justify-content: center;
	align-items: center;
	@media all and (max-width: 600px) 	{
		flex-flow: column nowrap;
		text-align: center;

.author__item {
	flex: 0 1 8rem;
	margin: 1rem;
	@media all and (max-width: 600px) {
		flex: 1 1 3rem;
		margin: 0.5rem;

.author__pic {
	flex-shrink: 0;
	flex-basis: 8rem;
	object-fit: cover;
	object-position: center;
	width: 8rem;
	height: 8rem;
	border-radius: 50%;
	padding: 0.3rem;
	border: 2px solid rgba(0,0,0,0.5);

.author__heading {
	font-size: 90%;
	display: inline-block;
	margin-bottom: 0.5rem;

.author__link {
	text-decoration: none;
	color: blue;
	&:focus {
		text-decoration: underline;
View Compiled

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.