fix: allow mobile views on developer champion page to have single col…

…umn layout before applying 2 and 3 columns grid layouts
newrelic · Aug 9, 2020 · 2f5cc23 · 2f5cc23
1 parent 6c28f6d
commit 2f5cc23
Showing 1 changed file with 15 additions and 0 deletions.
diff --git a/src/pages/developer-champion.module.scss b/src/pages/developer-champion.module.scss
@@ -8,6 +8,10 @@
   display: grid;
   grid-template-columns: repeat(2, calc(50% - 1rem));
   grid-gap: 2rem;
+
+  @media (max-width: 760px) {
+    grid-template-columns: 1fr
+  }
 }
 
 .img {
@@ -18,10 +22,21 @@
   display: grid;
   grid-template-columns: repeat(3, 1fr);
   grid-gap: 2rem;
+
+  @media (max-width: 760px) {
+    display: block;
+    text-align: center;
+  }
 }
 
 .point {
   text-align: center;
+  max-width: 400px;
+  margin: auto;
+
+  @media (max-width: 760px) {
+   margin-bottom: 40px;
+  }
 }
 
 .pointIcon {