title: NextJs SSR not recognizing CSS Media queries for mobile
body: <p>I just integrated Nextjs SSR into my React project. Before this, my css media queries for mobile-responsiveness were working perfectly. Now, when I use Chrome's tools to view my app on a mobile screen size or even on my own device, I get the view as if it's on desktop.</p>
  
  <p>It seems like the server is rendering the entire page and assuming desktop size and not re-rendering when it hits the client. If that's the case, how do I tell it the user is mobile and to use those CSS queries?</p>
  
  <p>Here are my media queries that don't seem to be working. I'm not using CSS in JS, maybe I should be? I'm using regular css files for each component.</p>
  
  <pre><code>.Footer {
      width: var(--webMaxContentWidth);
      height: 200px;
      background: #368efb;
      display: flex;
      flex-direction: column;
      justify-content: center;
  }
  @media (max-width: 768px) {
      .Footer {
          width: 100%;
          height: 400px;
          margin: 0 20px;
      }
  }
  </code></pre>
  
  <p>Any help is appreciated! </p>