Back to post index

A more responsive
Published: 23 Dec 2016 18:46

Finally had some time to make this site more responsive - it has always looked bad on mobile browsers, despite being just text and a few images.

Mostly the process involved correctly using CSS:

diff --git a/_includes/style.css b/_includes/style.css
index bf6e064..cf8f76f 100644
--- a/_includes/style.css
+++ b/_includes/style.css
@@ -1,12 +1,15 @@ {
+@media only screen and (min-width: 800px) {
+    body {
+        max-width: 800px;
+    }
+img {
     display: block;
     margin-left: auto;
     margin-right: auto;
-div.f1 {
-    width: 100%;
-    max-width: 800px;
+    max-width: 100%;
+    height: auto;

The div.f1 specification of width: 100% and max-width: 800px meant that things appeared very small on mobile browsers. As far as I know, the correct way to scale is to use the @media qualifier.


<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">

to every <head> block was required for the style.css changes to work. I also had to edit each post and remove explicit <img class="center" ... in favour of the Markdown image syntax.