Menu
Couldn't find anything about this so I ask this here:
I got a really simple page and wanted an element to be full width (width: 100vw). I noticed that at a smaller screen than around 300px it got smaller and wasn't actual full width.
No inserted a complete new div on top of all my html, gave it a background: black; with height: 100vh; and width: 100vw; and it's actually not the full screen size.
As you can see in my screenshot, the set "display size" is 352px x 778 and the element should be 352x778 (so exact the screensize), but as you can see it's smaller.
What causes this and how do I fix it? What is correct now? What I see or what the value says? It's pretty annoying.
If needed: I use chrome 89.0.4389.114 on macOS Big Sur Version 11.2.3 (20D91)
Added while inserting code:
As I reduced the code to post it here, I see that the wrapper is the problem. But this question is still valid I believe. Why is the wrapper thats not connected with the <header> a problem for the viewport?
html,
body {
margin: 0;
}
.wrapper {
width: 380px;
margin: 0 auto;
}
.header {
background: black;
width: 100vw;
height: 100vh;
}<html>
<head>
<meta name="viewport" content="width=device-width">
</head>
<body>
<div class="header">
</div>
<div class="wrapper">
<div class="user">
<h2>
Lorem Ipsum,
<br> Lorem Ipsum Dolor sit amet!
</h2>
</div>
</div>
</body>
</html>
397
asked Oct 17 '25 23:10
Yup, I had the same issue, just needed to put the Chrome window pack to "Actual Size" and it cleared up any inaccuracies.
198
answered Oct 19 '25 19:10
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With