Css body width changes between desktop and mobile-CodePudding

I've been having problems with having my pages use 100% width. It works fine on desktop, taking the full page width, but on mobile it gets weird. I am using NextJS, and Material-UI, if it makes any difference. I tried to set width: 100%, but it doesn't change anything.

My CSS is:

global.css:

    html,
body {
    padding: 0;
    margin: 0;
    font-family: 'Roboto', sans-serif;
}

a {
    color: inherit;
    text-decoration: none;
}

* {
    box-sizing: border-box;
}

_app.js

<Head>
        <title>E-commerce</title>
        <meta
            name="viewport"
            content="initial-scale=1.0, width=device-width"
                                />
        </Head>

This is the body width on mobile. The HTML, body width is the gray part

CodePudding user response：

I'm not sure what you need but try using width: 100vw. That might do the job. Although you should try to avoid giving width to <body> and use a container <div> instead.
From the image it looks like your body content is overflowing from the body tag which would later cause problems as your project expands and has more elements.

CodePudding user response：

The preview is as expected. please update your CSS with @media queries. your CSS is working fine for desktop view. But in the <body> tag you have some element(s) that are bigger than the current viewport. Use browser inspector and you'll find the element(s).