Website not rendering properly on next.js for mobile
Question
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: website picture
The entire website is pushed to the left half of the screen.
This is not a responsive issue because when I shrink the size on normal desktop view it works perfectly
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 eg after a 500 error it works fine and then after I refresh the page it returns the half view.
next.config.js::
module.exports = {
reactStrictMode: true,
};
next-env.d.ts:
/// <reference types="next" />
/// <reference types="next/types/global" />
/// <reference types="next/image-types/global" />
_app.tsx:
import type { AppProps } from "next/app";
import "../core/scss/style.scss";
function MyApp({ Component, pageProps }: AppProps) {
return <Component {...pageProps} />;
}
export default MyApp;
_document.tsx:
import Document, { Html, Head, Main, NextScript } from "next/document";
class MyDocument extends Document {
// @ts-ignore
static async getInitialProps(ctx) {
const initialProps = await Document.getInitialProps(ctx);
console.log(initialProps);
return { ...initialProps };
}
render() {
return (
<Html>
<Head />
<body>
<Main />
<NextScript />
</body>
</Html>
);
}
}
export default MyDocument;
package.json:
"dependencies": {
"@chakra-ui/react": "^1.6.5",
"@emotion/react": "^11",
"@emotion/styled": "^11",
"@fortawesome/fontawesome-svg-core": "^1.2.35",
"@fortawesome/free-solid-svg-icons": "^5.15.3",
"@fortawesome/react-fontawesome": "^0.1.14",
"classnames": "^2.3.1",
"formik": "^2.2.9",
"framer-motion": "^4",
"history": "^5.0.0",
"next": "11.0.1",
"node-sass": "4.12.0",
"react": "17.0.2",
"react-dom": "17.0.2",
"react-intersection-observer": "^8.32.0"
},
"devDependencies": {
"@types/react": "17.0.15",
"eslint": "7.31.0",
"eslint-config-next": "11.0.1",
"typescript": "4.3.5"
}
Env: Mac-OS Big Sur Browser Chrome
5 answers
solution1
0 2021-08-02 00:50:49
This is a CSS issue - you might need to style the __next element and do this:
#__next {
display: flex;
flex-direction: column;
min-height: 100vh;
}
solution2
0 2021-10-21 07:28:46
检查某个块是否有white-space: nowrap并且它水平溢出，从而产生此问题。
solution3
0 2021-12-26 12:04:08
I had the same problem i fixed by adding this CSS style:
@media screen and (max-width: 320px) {
#__next {
display: flex
}
}
I added a media query because if you set display to flex directly it will work but it will create the same problem on higher screens.
solution4
0 2022-09-29 16:31:41
I tried both styles, and actually, they only work when they are together:
#__next {
display: flex;
flex-direction: column;
min-height: 100vh;
min-width: 100vh;
}
@media screen and (max-width: 320px) {
#__next {
display: flex
}
}
this is a weird bug that I have only had when deploying to Vercel, I have never had this issue when using NextJs on another server
solution5
0 2023-01-18 14:35:31
I had the same issue and the problem was that I had some flex row components doing some unwanted overflow to the right, so I had to make them 'wrap' (jump to next line when they run out of space), by adding this to each of them:
flex-wrap: wrap;
If you're using Tailwind like me it will look like this on your component:
className="flex-wrap"
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.