From 4c99c31623ba042b00ccc45bc7cdd4e3e437f1d5 Mon Sep 17 00:00:00 2001
From: Andy Damevin <ia3andy@gmail.com>
Date: Fri, 20 Dec 2019 12:41:32 +0100
Subject: [PATCH] Fix some mobile layout problems

Closes #406
---
 _sass/layouts/blog.scss  | 6 ++++++
 _sass/layouts/guide.scss | 8 ++++++++
 2 files changed, 14 insertions(+)

diff --git a/_sass/layouts/blog.scss b/_sass/layouts/blog.scss
index 0c924c0db05..0d6d3110e06 100644
--- a/_sass/layouts/blog.scss
+++ b/_sass/layouts/blog.scss
@@ -5,6 +5,12 @@ body.post {
     h1, h2, h3, h4, h5, h6, p, small, strong, em,
     table tr th, table tr td, li, i, dt, .title, .paragraph, .footnote, b {
       color: #0D1C2C;
+      @media only screen and (max-width: 768px) {
+        word-wrap: break-word;
+      }
+    }
+    .note, .colist {
+      overflow: auto;
     }
     a {
       color: $link-light-bg;
diff --git a/_sass/layouts/guide.scss b/_sass/layouts/guide.scss
index 89192b0f34a..09e6ca075bd 100644
--- a/_sass/layouts/guide.scss
+++ b/_sass/layouts/guide.scss
@@ -6,6 +6,12 @@ body.guides-configuration-reference {
     h1, h2, h3, h4, h5, h6, p, small, strong, em,
     table tr th, table tr td, li, i, dt, .title, .paragraph, .footnote {
       color: #0D1C2C;
+      @media only screen and (max-width: 768px) {
+        word-wrap: break-word;
+      }
+    }
+    .note, .colist {
+      overflow: auto;
     }
     a, .description-decoration, .description-decoration span{
       color: $link-light-bg;
@@ -16,9 +22,11 @@ body.guides-configuration-reference {
     .toc {
       float: right;
       width: 350px;
+      padding-right: 20px;
       margin-left: 20px;
       margin-bottom: 20px;
       background-color: $white;
+      word-wrap: break-word;
       ul {
         list-style: none;
       }