Merge pull request #569 from tyreer/responsive-columns

Add responsive columns to developer champion and podcast pages

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 {

src/pages/podcasts.js

@@ -13,7 +13,7 @@ const PodcastsPage = () => {
         <PageLayout.Header title="New Relic Podcasts" />
         <PageLayout.Content>
           <section className={cx(styles.section, styles.twoColumn)}>
-            <div>
+            <div className={styles.bodyText}>
               <p>
                 Sometimes we talk on the internet about some things. You
                 probably listen to some things on the internet sometimes. We're

src/pages/podcasts.module.scss

@@ -6,12 +6,28 @@
 
 .twoColumn {
   display: grid;
-  grid-template-columns: repeat(2, calc(50% - 1rem));
   grid-gap: 2rem;
+  grid-template-columns: repeat(2, calc(50% - 1rem));
+
+  @media (max-width: 760px) {
+    grid-template-columns: 1fr
+  }
+}
+
+.bodyText {
+  @media (max-width: 760px) {
+    order: 1;
+  }
 }
 
 .img {
   width: 100%;
+  max-width: 350px;
+  margin: 0 auto;
+
+  @media (max-width: 760px) {
+    order: 0;
+  }
 }
 
 .player iframe {