chore(demo): add mobile layout for mdx pages

newrelic · Feb 13, 2021 · f3a4d92 · f3a4d92
1 parent 5f6999a
commit f3a4d92
Show file tree

Hide file tree

Showing 2 changed files with 10 additions and 3 deletions.
diff --git a/demo/src/layouts/MainLayout.js b/demo/src/layouts/MainLayout.js
@@ -10,7 +10,6 @@ import {
   Logo,
   Navigation,
   NavItem,
-  NewRelicLogo,
   SearchInput,
   SEO,
 } from '@newrelic/gatsby-theme-newrelic';
@@ -32,12 +31,12 @@ const MainLayout = (props) => {
           justify-content: space-between;
           align-items: center;
 
-          @media screen and (max-width: 400px) {
+          @media screen and (max-width: 760px) {
             display: flex;
           }
         `}
       >
-        <NewRelicLogo />
+        <Logo />
         <HamburgerMenu
           onToggle={() => setIsMenuOpen((isOpen) => !isOpen)}
           isOpen={isMenuOpen}

diff --git a/demo/src/templates/basic.js b/demo/src/templates/basic.js
@@ -47,6 +47,14 @@ const BasicTemplate = ({ data, location }) => {
             'content page-tools';
           grid-template-columns: minmax(0, 1fr) 320px;
           grid-column-gap: var(--site-content-padding);
+
+          @media screen and (max-width: 760px) {
+            grid-template-areas:
+              'page-title'
+              'content'
+              'page-tools';
+            grid-template-columns: minmax(0, 1fr);
+          }
         `}
       >
         <h1