VW is wider then my actual screen
Hi!
I have a problem with setting width of my HTML elements. When I use
100vw as my width, it works out fine, but for some reason it is a little bit wider then my screen (I tried Chrome and Firefox, it's the same on both of these).
BUT when I turn the responsive mode in dev tools, everything fixes itself no matter what is the width of viewport, everything works correctly.
How can I fix that?
I have <meta name="viewport" content="width=device-width, initial-scale=1"> in my HTML, so I have no idea what's wrong.47 Replies
did you reset the default margin/padding on the body?
also did you set box-sizing to border-box?
Yeah, did everything.
code and screenshot or it didn't happen 😉 (codepen even better)
Sure, there you go!
https://codepen.io/dunder__alexander/pen/ZEorQRv
this is basically all I have for my project from FrontEnd Mentor
i can not see a y overflow
Weird, I have it right here
btw. when you use a background image to lay white (or very light) text on top. make sure you also use a background-color or gradient. When (for some reason) an image does not load. you can still read it
are you zoomed in per chance?
Got it, alright!
No, I tried zooming in and out, still the same
try
then you can see what element is sticking out
Huh, now I only get overflowing purple screen
Maybe it could a problem with my screen? Idk
if you scroll to the right, can you see if there is content?
Nope, only purple screen
hm okay. so it is not overflowing issues.
what happens if you make continaer-main div : 100% instead of 100vw.
Same, huh
happens in multiply browsers?
Yup, Chrome and Firefox
why do you declare width for the children when you already declared two columns in the parent of container-main?
and you use 1fr
can you make a clean empty document and test the width
Because this happens if I remove width from grid elements:
Doesn't happen in Codepen for some reason
Is it because of the images?
ohw, now i see the overflow.
so that purple was not across the whole page
No overflow this way
Huh, I wonder what am I doing wrong
here is your issue
that part exceeds the 100vw width
Alright, so the grid element is bigger than the screen. But how did that happen if I set it's width manually to 50vw each?
I also set the width of the container to 100vw, and its width works fine
well when it is 50vw, but the text doesnt fit anymore, it will let it grow
Here audience can not break line, including the padding of the cell, it will push it out
so make your media query kick in earlier. or take a better look at your grid setup
Am I able to just
clamp() the font size a little bit smaller? I have it already, but it seems like it's not small enough
Sorry if I'm asking dumb questions, it's my first projectbut there should not be a gap in your local env if you remove the widths set for the children
this is confusing me
are you sure this all of css / html in the codepen?
Yeah, definitely
And it works like it should in codepen
That gap was actually the reason I added width manually
do the images themself have white border?
They don't, but I'll try to set border to 0 just in case
no i mean check the image not css
No, images themselves are okay
try setting the background-size to 200%
Will do
you can upload the images to imgur so we can use it in codepen
Okay, just a moment
Oh I think I fixed it
I removed the width on both grid element and grid itself and everything stopped overflowing
The problem was here all along
Thanks everyone for helping me out, I really appreciate it!
i asked about this exactly lol
This is very helpful as well because I still have overflow when I shrink my screen too much, now I know why
yeah big fonts on small screen is a no no
Yeah, I thought I removed everything but I didn't
Do you think it's better to clamp it smaller or there is another way?
I would clamp it yeah