Can someone explain to me why this is happening?
Context: I'm performing the challenges, and when I tried to zoom in, I saw this!
Problem: I'm confused on why my background color is not taking the whole screen when I minimized it? Could someone explain why this is occurring and how I can solve it?
here's my code: https://codepen.io/Mega-123/pen/zYVwbpQ
17 Replies
Your codepen doesn't look like that, at least not in Chrome or Firefox that I have tested.
Are you sure that you have copied over all of the code to the codepan?
Yeah, I dropped my entire HTML and CSS project on CodePen, so I'm sure that's all of my code.
And, in the codepen, do you see the same issue as your dev version?
In CodePen, I don't see it, but when I inspect it and zoom in, it happens.
I used Visual Studio Code for my HTML and CSS.
this kind of layout is usually found on the web, not on mobile
The mobile view is discussed later on in the course, as far as I can remember
also, there's no viewports that are only 125px wide, not anymore
Ooh is that so!
Then why is my background color not filling the entire background?
I can't reproduce that at all, so I don't know
you haven't verified your email in codepen, so I can't look at the pen in full screen view. codepen's own interface has a minimum width, so I can't get it unreasonably small like you have here
this is as small as it gets, and it works fine:
320px is also a totally reasonable lower limit in 2024
Oh, so that's how CodePen works! And thanks for answering my question.
well, codepen restricts the full view without its own interface (so the boxes to enter the code) to accounts that have verified their email. That means that there's some limitations to how small you can make the viewport, as codepen itself sets the minimum width to 320px and just accepts scrolling below that.
if your issue occurs above 320px, you either didn't use the latest version of the code you're looking at for the codepen (or didn't save it), or you're doing something else on top of setting the responsive viewport to an unreasonably small size
either way, as long as the site works on reasonable desktop sizes, CRL will get into mediaqueries and small screens later on in the course so just keep going
(also, questions about CRL should go in #conquering-responsive-layout, and not in #front-end)
Try removing
initial-scale from the viewport meta tag. Replace <meta name="viewport" content="width=device-width, initial-scale=1"> with <meta name="viewport" content="width=device-width">it didn't work
I figure it out already, I just need to remove my
<meta name="viewport" content="width=device-width, initial-scale=1>no, thats horrible!
the problem is that the text is too big for the viewport
it's overflowing
@ἔρως your right thx for that!
you're welcome