Total nightmare trying to use React Grid System with Gatsby.

Issue: on page load window is undefined so the grid defaults to the size defined. So loading mobile pages results in desktop view etc.

https://stackoverflow.com/questions/58608523/gatsby-react-conditional-rendering-based-on-window-innerwidth-misbehaving

https://stackoverflow.com/questions/59805587/gatsby-server-side-rendering-of-page-with-client-only-routes-based-on-window-lo

Resolution: adding window check before Layout load.

More to come...

layout.js

const Layout = ({ children }) => {
  return typeof window !== 'undefined' && (
    <ThemeProvider theme={theme}>
      <GlobalStyle />
      <SiteHeader
        siteTitle={data.site.siteMetadata.title}
      />
      {children}
      <SiteFooter />
    </ThemeProvider>
  )
}

export default Layout