peach.css: accommodate small screens

1 files changed, 17 insertions, 1 deletions

diff --git a/static/peach.css b/static/peach.css
index e39d48a..a8b2115 100644
--- a/static/peach.css
+++ b/static/peach.css
@@ -33,6 +33,11 @@ body {
     }
 }
 
+@media (max-width: 440px)  {
+    .peach {
+	flex-direction: column;
+    }
+}
 
 /** weather **/
 .header-container,
@@ -92,6 +97,12 @@ body {
     color: rgb(150,150,150);
 }
 
+@media (max-width: 450px)  {
+    .current-period-container {
+	text-align: center;
+    }
+}
+
 .timeline-container {
     display: flex;
     justify-content: center;
@@ -135,7 +146,12 @@ body {
     justify-content: center;
 }
 
-.search-container .search-form  .search-box {
+@media (max-width: 440px)  {
+    .search-container .search-form {
+	justify-content: flex-start;
+	flex-wrap: wrap;
+	row-gap: 5px;
+    }
 }
 
 .search-container .search-form  .search-box .location {