Improve responsiveness of css to mobile phone screens

1 files changed, 35 insertions, 5 deletions

diff --git a/html/assets/style.css b/html/assets/style.css
index d5121fb..b550d4f 100644
--- a/html/assets/style.css
+++ b/html/assets/style.css
@@ -77,6 +77,7 @@ blockquote
     display:block;
     margin: auto;
     font-size: 72px;
+    word-break: break-word;
 }
 
 .title-header-container
@@ -117,6 +118,16 @@ blockquote
     margin-right: 5px;
 }
 
+.plant-status-text 
+{
+    margin: auto;
+}
+.plant-status-text p 
+{
+    margin: auto;
+    padding-top: 10px;
+}
+
 .page-info-date
 {
     margin-left: 10px;
@@ -180,16 +191,17 @@ main
 {
     display: flex;
     flex-wrap: wrap;
+    justify-content: center;
 }
 
 .note-box 
 {
-   max-width: 400px;
+   max-width: 300px;
    max-height: 500px;
    background-color: #FCFBF7;
    margin-right: 20px;
-   height: 100%;
-   width: 400px;
+   height: fit-content;
+   width: 300px;
    margin-bottom: 20px;
    border-radius: 5px;
    border: 2px solid #E6E3E1;
@@ -216,7 +228,7 @@ main
 
 .note-box img 
 {
-    max-width: 380px;
+    max-width:280px;
     max-height: 480px;
     margin-left: auto;
     margin-right: auto;
@@ -232,6 +244,24 @@ main
     border-radius: 5px;
 }
 
+@media (max-width: 600px)
+{
+    .page-self-image
+    {
+        float: none;
+    }
+
+    .page-info-container p
+    {
+        margin-top: 2px;
+    }
+
+    .page-info-date-container
+    {
+        display: initial;
+    }
+}
+
 .animated-box::before 
 {
     top: 0;
@@ -313,7 +343,7 @@ ul.task-list{list-style: none;}
 pre > code.sourceCode { white-space: pre; position: relative; }
 pre > code.sourceCode > span { display: inline-block; line-height: 1.25; }
 pre > code.sourceCode > span:empty { height: 1.2em; }
-.sourceCode { overflow: visible; }
+.sourceCode { overflow: scroll; }
 code.sourceCode > span { color: inherit; text-decoration: inherit; }
 div.sourceCode { margin: 1em 0; }
 pre.sourceCode { margin: 0; }