React-responsive not working on first load

[joshunwin]

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:

Indonesia Butuh Aksi Nyata, Bukan Hanya Selogan

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>
  }

[jen]

Hi there, and welcome

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:

[Support Guide] Can I run a web server, HTTP listener, and/or database at Netlify?

Last reviewed by Netlify Support on December 2022 How do I run a server/database at Netlify? We often get questions about how to run a specific backend server or database at Netlify. Examples of these types of questions include: How to I get my node HTTP listener to respond to requests? How do I start Mongo/MySQL/<insert-some-database-here> running on the server? How can I SSH into my website? We are here today to answer these questions - and the answer is: you can’t! What do you m…

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?

Way to use media query(javascript) for responsive layout?

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:

Is this SSR ready out of the box?

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