White space under my landing page,annoying!

HTML-CSS
1

Hey there,

working on a small project and cant seem to figure out 2 things, please see codepen link.

  1. Everytime I resize the page (from a large screen), theres this annoying white space under my main image, what causes this?

  2. 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

3

Hi randelldawson,

thanks for ur reply

  1. 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.

  1. This is what it should look like in chrome (fine),and this in FF (not looking good)

please see my attachments

thanks

good
good1524×735 86.6 KB
bad
bad820×621 53.7 KB

5

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

6

Remove

background-size: cover;

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

background-position: center;
1 Like
8

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?

9

all updated as per your suggestion, now I cant even see the red text box?

im so confused

10

Because you have a typo. Review your work.

11

fixed it…same thing…there’s a big white space on the bottom.

12

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.

1 Like
13

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

thanks

14