Adjust small sizes with new grid

1 files changed, 15 insertions, 30 deletions

diff --git a/static/css/style.css b/static/css/style.css
index 846bf21..8b719ae 100644
--- a/static/css/style.css
+++ b/static/css/style.css
@@ -266,7 +266,7 @@ main {
 
   section {
     flex: 1;
-    min-width: calc(17 * var(--base-grid));
+    min-width: calc(13 * var(--base-grid));
     max-width: calc(25 * var(--base-grid));
 
     ul {
@@ -280,22 +280,21 @@ main {
 
 }
 
-#skills {
-  background-image: url('/img/darkgrid.svg');
-  padding: calc(2 * var(--base-grid));
-  width: 100%;
-  display: flex;
+#skills, #testimonials {
   column-gap: calc(4 * var(--base-grid));
-  row-gap: calc(3 * var(--base-grid));
+  display: flex;
   flex-wrap: wrap;
+  padding: calc(2 * var(--base-grid));
+  row-gap: calc(3 * var(--base-grid));
+  width: 100%;
 
-  @media (max-width: 360px) {
+  @media (max-width: 425px) {
     padding: calc(2 * var(--base-grid)) var(--base-grid);
   }
 
   section {
     flex: 1;
-    min-width: calc(17 * var(--base-grid));
+    min-width: calc(13 * var(--base-grid));
 
     @media (max-width: 360px) {
       min-width: calc(100vw - 3 * var(--base-grid));
@@ -303,27 +302,12 @@ main {
   }
 }
 
+#skills {
+  background-image: url('/img/darkgrid.svg');
+}
+
 #testimonials {
   background-image: url('/img/lightgrid.svg');
-  padding: calc(2 * var(--base-grid));
-  width: 100%;
-  display: flex;
-  column-gap: calc(4 * var(--base-grid));
-  row-gap: calc(3 * var(--base-grid));
-  flex-wrap: wrap;
-
-  @media (max-width: 360px) {
-    padding: calc(2 * var(--base-grid)) var(--base-grid);
-  }
-
-  section {
-    flex: 1;
-    min-width: calc(17 * var(--base-grid));
-
-    @media (max-width: 360px) {
-      min-width: calc(100vw - 3 * var(--base-grid));
-    }
-  }
 }
 
 footer {
@@ -335,9 +319,10 @@ footer {
     list-style-position: inside;
   }
   li {
-    padding: 0 var(--base-grid);
-    list-style-position: inside;
     float: left;
+    list-style-position: inside;
+    padding: 0 var(--base-grid);
+    text-align: left;
 
     @media (max-width: 360px) {
       padding: 0;