working on a small project and cant seem to figure out 2 things, please see codepen link.
Everytime I resize the page (from a large screen), theres this annoying white space under my main image, what causes this?
I have a small textbox (class of “pop”), while it looks fine in chrome,if i switch to FF or IE browser it looks retarded, where have I gone wrong in my CSS?
Thanks in advance
thanks for ur reply
- I tried adding ur suggestion below, no luck…if you scroll down(only when re-sizing) there is white space on the bottom
Try changing height:100%; to height:100vh; for #landing-page definition.
- This is what it should look like in chrome (fine),and this in FF (not looking good)
please see my attachments
i have tried ur changes…didnt seem to work…there is still white space at the bottom for some reason.
i have updated my codepen
if you really want the image to cover the entire 100% height. (of course, due to image proportions, it will be cropped)
You can use
thanks i removed that, seemed to fix my white space problem:grinning:…now when I resize it the image doesn’t resize and scale down?
all updated as per your suggestion, now I cant even see the red text box?
im so confused
Because you have a typo. Review your work.
fixed it…same thing…there’s a big white space on the bottom.
You made two references to the pop class in CSS. Also, every problem with that white space comes from that pop element. Review your code and you’ll find your answers.
Thanks everyone who took time to answer,
i finally picked it up thru a combination of your answers.
i had repeated my pop class more than once