title: Website not rendering properly on next.js for mobile
body: <p>I downloaded a website template online and I didn't like the implementation to converted to TS and a next project so that it could easily be deployed to Vercel. However, when I put it in mobile mode on Chrome dev tools this happens:
  <a href="https://i.stack.imgur.com/7tcga.png" rel="nofollow noreferrer">website picture</a></p>
  <p>The entire website is pushed to the left half of the screen.</p>
  <p>This is not a responsive issue because when I shrink the size on normal desktop view it works perfectly</p>
  <p><a href="https://i.stack.imgur.com/5PJce.png" rel="nofollow noreferrer">desktop small screen view</a></p>
  <p>I have tried setting HTML width to 100% and 100vh and every CSS trick in the book. I am convinced that it is an issue with server-side rendering because there are flashes where the website is rendering properly e.g. after a 500 error it works fine and then after I refresh the page it returns the half view.</p>
  <p><strong>next.config.js::</strong></p>
  <pre><code>module.exports = {
    reactStrictMode: true,
  };
  
  </code></pre>
  <p><strong>next-env.d.ts:</strong></p>
  <pre><code>/// &lt;reference types=&quot;next&quot; /&gt;
  /// &lt;reference types=&quot;next/types/global&quot; /&gt;
  /// &lt;reference types=&quot;next/image-types/global&quot; /&gt;
  
  </code></pre>
  <p><strong>_app.tsx:</strong></p>
  <pre><code>import type { AppProps } from &quot;next/app&quot;;
  import &quot;../core/scss/style.scss&quot;;
  
  function MyApp({ Component, pageProps }: AppProps) {
    return &lt;Component {...pageProps} /&gt;;
  }
  export default MyApp;
  
  </code></pre>
  <p><strong>_document.tsx:</strong></p>
  <pre><code>import Document, { Html, Head, Main, NextScript } from &quot;next/document&quot;;
  
  class MyDocument extends Document {
    // @ts-ignore
    static async getInitialProps(ctx) {
      const initialProps = await Document.getInitialProps(ctx);
      console.log(initialProps);
      return { ...initialProps };
    }
    render() {
      return (
        &lt;Html&gt;
          &lt;Head /&gt;
          &lt;body&gt;
            &lt;Main /&gt;
            &lt;NextScript /&gt;
          &lt;/body&gt;
        &lt;/Html&gt;
      );
    }
  }
  
  export default MyDocument;
  
  </code></pre>
  <p><strong>package.json:</strong></p>
  <pre><code>&quot;dependencies&quot;: {
      &quot;@chakra-ui/react&quot;: &quot;^1.6.5&quot;,
      &quot;@emotion/react&quot;: &quot;^11&quot;,
      &quot;@emotion/styled&quot;: &quot;^11&quot;,
      &quot;@fortawesome/fontawesome-svg-core&quot;: &quot;^1.2.35&quot;,
      &quot;@fortawesome/free-solid-svg-icons&quot;: &quot;^5.15.3&quot;,
      &quot;@fortawesome/react-fontawesome&quot;: &quot;^0.1.14&quot;,
      &quot;classnames&quot;: &quot;^2.3.1&quot;,
      &quot;formik&quot;: &quot;^2.2.9&quot;,
      &quot;framer-motion&quot;: &quot;^4&quot;,
      &quot;history&quot;: &quot;^5.0.0&quot;,
      &quot;next&quot;: &quot;11.0.1&quot;,
      &quot;node-sass&quot;: &quot;4.12.0&quot;,
      &quot;react&quot;: &quot;17.0.2&quot;,
      &quot;react-dom&quot;: &quot;17.0.2&quot;,
      &quot;react-intersection-observer&quot;: &quot;^8.32.0&quot;
    },
    &quot;devDependencies&quot;: {
      &quot;@types/react&quot;: &quot;17.0.15&quot;,
      &quot;eslint&quot;: &quot;7.31.0&quot;,
      &quot;eslint-config-next&quot;: &quot;11.0.1&quot;,
      &quot;typescript&quot;: &quot;4.3.5&quot;
    }
  
  </code></pre>
  <p>Env: Mac-OS Big Sur
  Browser Chrome</p>