I've been experiencing difficulties in getting my pages to utilize 100% width. While it displays properly on desktop, occupying the entire page width, a strange issue arises on mobile devices. I am utilizing NextJS and Material-UI, in case that information is relevant. Despite attempting to set the width to 100%, there has been no change.
Here is my CSS:
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 screenshot shows the body width on mobile. The gray area represents the HTML and body width.