diff --git a/http-html.go b/http-html.go
index 794b2be..da33915 100644
--- a/http-html.go
+++ b/http-html.go
@@ -117,22 +117,34 @@ func (r *HTWriter) WriteTo(w io.Writer) (int64, error) {
 		<head>
 			<title>The Watcher</title>
 			<style>
-				body { font-family: sans-serif; width: 70%; margin: auto; background: black; color: white; }
+				@media screen and (max-width: 500px) {
+					body { width: 100%; margin: 0; }
+				}
+				@media screen and (min-width: 500px) and (max-width: 940px) {
+					body { width: 90%; margin: auto; }
+					.h-card { columns: 2; }
+				}
+				@media screen and (min-width: 940px) {
+					body { width: 70%; margin: auto; }
+					.h-card { columns: 2; }
+				}
+
+				body { font-family: sans-serif; background: black; color: white; }
 				a { color: cornflowerblue; text-decoration: none; }
 				main { }
 				pre { white-space: pre-wrap; }
 				pre.preamble { color: green; }
 				article { background-color: #333; border: 1px solid green; border-radius: 4px; padding: 4px; margin: 2px; }
 				article pre { color: orange; }
-				.h-card { columns: 2; }
 				.h-card .author { display: flex; }
 				.h-card .icon { width: 36px; margin: 4px; }
 				.h-card .u-photo { width: 32px; }
-				.h-card .date { text-align: right;}
 				.p-org a { color: darkgrey; }
+				.h-card .date { text-align: right;}
 				section { padding: 1em; border: 1px solid darkgreen; background-color: #111;  }
 				section img { max-width: 100%; }
 			</style>
+			<meta name="viewport" content="width=device-width, initial-scale=1">
 		</head>
 	<body onload="setTimestamps()">
 	<pre class='preamble'>
@@ -195,7 +207,7 @@ func (r *HTWriter) WriteTo(w io.Writer) (int64, error) {
 					</div>	
 				</header>	
 				<section>
-					%h
+					%-h
 				</section>
 			  </div>		  
 			</article>
