startpage: improve mobile adaption

jdav_web/static/startpage/css/base.css

@@ -92,24 +92,28 @@ 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;
 }
 
-.column {
+@media only screen and (min-width: 1024px) {
+    .column {
       float: left;
       width: 50%;
-  padding: 0 20px;
+    }
-}
 
-/* Clear floats after the columns */
+    /* Clear floats after the columns */
-.row:after {
+    .row:after {
       content: "";
       clear: both;
+    }
 }
 
 .footer a {

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;
 }