hiding sidebar on small screens, making width full width instead

Author: Kayla Wilkins

src/components/2_molecules/search-header.js

@@ -12,7 +12,7 @@ const SearchHeader = () => (
       }
     `}
     render={data => (
-      <header className="mb-4">
+      <header className="md:mb-4">
         <Search searchIndex={data.siteSearchIndex.index} />
       </header>
     )}

src/css/components/4_pages/api-page.css

@@ -1,9 +1,10 @@
 .layout-fixed .sidebar-container {
   overflow-y: hidden;
+  width: 100%;
 }
 
 .api-navigation-wrapper {
-  padding: 1.2rem;
+  padding: 1.2rem 1.2rem 0;
   overflow-y: scroll;
   width: 100%;
   height: 100%;
@@ -80,7 +81,7 @@
 }
 
 .list-container {
-  margin-bottom: 12px;
+  display: none;
 }
 
 .response-200 {
@@ -121,6 +122,7 @@
   }
 
   .list-container {
+    display: inline-block;
     margin-bottom: 0;
   }