React-responsive not working on first load

Support
,
1

Hi there, I have an issue which I assume is something to do with server-side-rendering with JAMstack but I can’t work out how to solve it. It’s tough to troubleshoot because the issue doesn’t exist on the local server when running netlify dev but does when it’s published on Netlify.

I’m creating a Gatsby site and have been using react-responsive plugin to create a bunch of inline media queries but they don’t seem to get picked up on initial page load when live.

The most obvious example of this is on a page like this:

Everything looks fine on a desktop sized display on load, and also if you scale your window down after load, but if you load the page initially on a tablet/mobile sized window the page completely breaks.

Is this plugin just not suitable for use with Gatsby? Is there a way to get the behaviour replicated on dev server?

Thanks for any help!

Here’s a trimmed example:

const Stories = ({data}) => {
  const isTabletOrMobile = useMediaQuery({ query: '(max-width: 1023px)' });
   
  return (
    <Layout>
      {isTabletOrMobile ?       
        <div style={{width: '100%', paddingBottom: '25px'}}>
          <Logo width='180px' margin='0' />
        </div> 
      :
        <div style={{position: 'relative', top: '-30px', left: '0px', width: '300px'}}>
          <Logo width='240px' margin='0' />
        </div>
  }
2

Hi there, and welcome :slight_smile:

It does seem like react-responsive is usable with Gatsby server-side rendering, but not sure if that will translate to using with Netlify, since we only serve static sites. Here’s a bit more on that:

It looks like using that plugin with a static site would be a bit of an advanced use case, but possible. There may be something useful in this thread for you?

But I admit that, just at a high level, I don’t know how the isTabletOrMobile check could work with a static site because the site will already be generated (with whatever dimensions) by the time check happens. See what this person says:

That said, we would love to be proven wrong on this- please let us know or if you find a workaround!