Started working on making the general layout more responsive.

src/components/CardContainer.js

@@ -2,28 +2,29 @@ import React from 'react'
 import {withStyles} from 'material-ui/styles';
 import FacilityCard from '../containers/FacilityCard'
 import Grid from 'material-ui/Grid';
-import fuzzysearch from 'fuzzysearch';
 
-const CardContainer = ({classes, searchTerm,facilities}) => {
+const CardContainer = ({classes, searchTerm, facilities}) => {
     const filterCards = (facility) => {
         const name = facility.facility_name.toLowerCase()
         return name.includes(searchTerm.toLowerCase())
     }
     return (
         <Grid container className={classes.root} spacing={24} justify={'center'} align={'flex-end'}>
-            {facilities.filter(filterCards).map(item =>{
-                return(<Grid key={item.slug} item>
-                    <FacilityCard facility={item}/>
-                </Grid>)
+            {facilities.filter(filterCards).map(item => {
+                return (
+                    <Grid key={item.slug} item>
+                        <FacilityCard facility={item}/>
+                    </Grid>
+                )
             })}
         </Grid>
     )
 }
 const styleSheet = {
-   
-    root:{
+
+    root: {
         // backgroundColor:'red',
-        margin:0,
+        margin: 0,
         width: '100%',
         display: 'flex',
         flexWrap: 'wrap',

src/components/Sidebar.js

@@ -12,44 +12,48 @@ const Sidebar = ({classes,facility,isSidebarOpen,facilities}) => {
     const removeBrackets = (name) => {
        if(typeof(name) === "undefined"){
            return ""
-       } 
+       }
        const openBracket = name.indexOf('[')
         if(openBracket !== -1){
             return name.substring(0,openBracket)
         }
         return name
-    } 
+    }
     // if(isSidebarOpen){
     //     return (<div></div>)
     // }
-    return( 
-        
+    return(
+
     <Paper className={classNames([classes.root,(!isSidebarOpen && classes.openSidebar),(isSidebarOpen && classes.closedSidebar)])}>
        <div className={classes.row1}>
            <Avatar className={classes.avatar} src={require('../images/chipotleLogo.png')} />
            <div className={classes.title}>
                 <Typography  type='display1'>{removeBrackets(facility.facility_name)}</Typography>
            </div>
-        </div> 
-           <Divider className={classes.divider}/>   
+        </div>
+           <Divider className={classes.divider}/>
            <div className={classes.labelHolder}>
                <div className={classes.labelRow}>
-                    <TextwTitle label="Location" content="The Johnson Center" /> 
-                    <TextwTitle label="Location" content="The Johnson Center" /> 
+                    <TextwTitle label="Location" content="The Johnson Center" />
+                    <TextwTitle label="Location" content="The Johnson Center" />
                </div>
                <div className={classes.labelRow}>
-                   <TextwTitle label="Location" content="The Johnson Center" /> 
-                   <TextwTitle label="Location" content="The Johnson Center asdfasdfasdfasdf  asd fas as asd asdfasdfasf " /> 
+                   <TextwTitle label="Location" content="The Johnson Center" />
+                   <TextwTitle label="Location" content="The Johnson Center asdfasdfasdfasdf  asd fas as asd asdfasdfasf " />
                </div>
-           </div> 
+           </div>
         <div className={classes.row2}>
         <FacilitiesMap facilities={facilities}facility={facility}/>
         </div>
     </Paper>
-    )   
+    )
 }
 const styleSheet = {
-   
+    '@media screen and (max-width: 600px)': {
+        root: {
+            display: 'none !important'
+        }
+    },
     labelRow:{
         display:'flex',
     },

src/containers/Layout.js

@@ -118,6 +118,7 @@ const styleSheet = {
         position:'relative',
         flex:'1 1 100%',
         height:'100%',
+        width: '100%',
         paddingTop:16,
     },
     sidebarToggleContainer:{
@@ -147,9 +148,13 @@ const styleSheet = {
         height:'calc(100% - 86px)',
         overflowY:'auto',
         overflowX:'hidden',
+    },
+    '@media screen and (max-width: 600px)': {
+        sidebarToggleContainer: {
+            display: 'none'
+        }
     }
-    
-}
+};
 
 function mapStateToProps(state) {
     return {

src/containers/SearchBar.js

@@ -97,6 +97,11 @@ function getSuggestions(value,suggestions) {
 }
 
 const styles = theme => ({
+    '@media screen and (max-width: 600px)': {
+        paperBackground: {
+            width: '90% !important'
+        }
+    },
   container: {
     flexGrow: 1,
     position: 'relative',