My Css/HTML (have no remove the media query column layout. I can now see the old container elements are still showing at <640px)
Hi guys,
For the Life of me I can’t figure out why when the page is resized (<640px) the background doesn’t reach the bottom. Also the flex-box container (with red border turned on) shows something halfway down the column (in-line with the ‘sign up’ button) Unsure if it’s tied in with the issue above.
Cheers
try
*{
margin: 0px;
padding: 0px;
}
that might solve the reaching problem.
Or add height: auto; to the box.
Thank you.
That didn’t seem to work. For some reason the old grid container is leaving it’s ‘imprint’ even after I’ve changed the new grid container size with @media.
i.e
640px >
say my grid container is 500px width.
at <640px say my grid container is 300px width. The 500px width is still showing (when I use *border on the page).
Doesn’t adjusting an element with media query usually override any other input at that specific size, in my case <640px?
I’m not sure if you’ve been working on your code meanwhile, but you don’t set the width of the .grid-container anywhere within a media query.
You also have an extra closing brace } at the very end of your CSS.
Yup was just doing some editing, thanks for the heads-up.
I’m still stumped with this one, let me ask you. Why with codepen does my output page look different in my editing window than in my ‘inspect’ window?
For example, in my editing window (right) everything looks exactly how I want it (in terms but when I inspect the image (left) I can see parts that are cut off and the background only reaches 50% of the page.
Are you only view the result, or do you have one of the code boxes open at the top as well? The 100vh will behave differently depending on what view you are in (with or without the code boxes at the top).
Edit: what View are you in?
Edit2: Oh I get it you are look at the page in device mode in the browser, correct?
meta tag.<meta name="viewport" content="width=device-width, initial-scale=1">
In your left image, the content is higher than 100vh, you have to scroll down to see it all. So the content is maybe 150vh, but you cut the background colour off at 100vh.
In the right image, the whole content fits inside the height, it’s even smaller, so the green background stretches further down than the content.
Full view. Just the codepen border at the top. And yup, when I change to device mode I get the different look.
This is amazing, I wondered if a full page was available without tall the other border and you have provided!
Thank you, I’ll give this a go in the morning. Was struggling to see what it could be.