startpage: improve mobile adaption

jdav_web/static/startpage/css/base.css

@@ -92,18 +92,21 @@ h6 {
 }
 
 .content {
-    width: 55%;
+    max-width: 100%;
+    width: 1000px;
     margin: 0 auto;
+    padding-left: 20px;
+    padding-right: 20px;
     overflow: hidden;
     position: relative;
     padding-top: 40px;
     padding-bottom: 40px;
 }
 
+@media only screen and (min-width: 1024px) {
     .column {
       float: left;
       width: 50%;
-  padding: 0 20px;
     }
 
     /* Clear floats after the columns */
@@ -111,6 +114,7 @@ h6 {
       content: "";
       clear: both;
     }
+}
 
 .footer a {
     text-decoration: none;

jdav_web/static/startpage/css/people_grid.css

@@ -1,7 +1,7 @@
 .grid-container {
     display: grid;
     grid-gap: 10px;
-    grid-template-columns: repeat(4, 1fr);
+    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
     padding: 15px;
 }