css updates for better mobile layout

1 files changed, 22 insertions, 0 deletions

diff --git a/src/static/site.css b/src/static/site.css
index e664c0ee..0f81d276 100644
--- a/src/static/site.css
+++ b/src/static/site.css
@@ -261,9 +261,11 @@ footer > :last-child {
 }
 
 #content {
+    box-sizing: border-box;
     padding: 20px;
     flex-grow: 1;
     flex-shrink: 3;
+    overflow-wrap: break-word;
 }
 
 .sidebar > h1,
@@ -904,4 +906,24 @@ li > ul {
     .content-columns {
         columns: 1;
     }
+
+    #content {
+        width: 100%;
+    }
+
+    #cover-art-container {
+        float: none;
+        margin: 0 10px 10px 10px;
+        margin: 0;
+        width: 100%;
+        max-width: unset;
+    }
+
+    #header {
+        display: block;
+    }
+
+    #header > div {
+        margin-top: 0.5em;
+    }
 }