Fix: UI components #11

Author: peterjuma

public/styles/style.css

@@ -192,7 +192,7 @@ input[type="text"]#title::placeholder {
   font-size: 18px;
   margin-top: 61px;
   width: 100%;
-  height: 90%;
+  height: calc(100% - 118px);
 }
 
 .editnote {
@@ -611,7 +611,7 @@ input[type=checkbox]:checked:after {
     padding-top: 0%;
     margin-top: 51px;
     width: 100%;
-    height: 92.2%;
+    height: calc(100% - 118px);
 }
 
 input[type="text"]#title {
@@ -667,6 +667,14 @@ input[type="text"]#title {
     #btnLink, #btnOList, #btnUList, #btnQuote, #btnImage, #btnTask, #btnTable, #btnStrike, #btnHline, #btnCodeBlock {
       display: none;
     }
+
+    .note {
+      padding: 5px;
+    }
+
+    .column {
+      height: 30px;
+    }
 }
 
 @media screen and (max-width: 700px) {
@@ -675,10 +683,71 @@ input[type="text"]#title {
     padding-top: 0%;
     margin-top: 49px;
     width: 100%;
-    height: 88.7%;
+    height: calc(100% - 91px);
+  }
+
+  .preview {
+    height: 90.8%;
+  }
+
+  .note {
+    padding: 5px;
+  }
+  .column {
+    height: 30px;
+  }
 }
 
-.preview {
-  height: 90.8%;
+@media screen and (max-width: 1100px) {
+  .shownote {
+    padding: 15px;
+    padding-top: 0%;
+    margin-top: 49px;
+    width: 100%;
+    height: calc(100% - 91px);
+  }
+
+  .preview {
+    height: 90.8%;
+  }
+
+  .note {
+    padding: 5px;
+  }
+
+  .column {
+    height: 30px;
+  }
+}
+
+@media screen and (max-width: 300px) {
+    #notes {
+      overflow: scroll;
+      margin-top: 10px;
+      border: solid 1px #D8D8D8;
+      height: calc(100% - 82px);
+  }
+
+  .left {
+    height: 97.5%;
+    padding-top: 5px;
+    padding-bottom: 5px;
+    padding-left: 2px;
+    padding-right: 0px;
+  }
+
+  .column {
+    width: 100%;
+    height: 25px;
+    border: 1px solid #D8D8D8;
+    border-radius: 5%;
+  }
+
+  .note {
+    padding: 5px;
+  }
+
+  .column {
+    height: 30px;
+  }
 }
-}