Screen size responsiveness issue

1

hey all!

so my website has this HUGE space at the bottom of the page when im testing it under 1600X2560 resolution. you can see this by going to firefox and pressing ctr+shift+m and posting my debug url on there

http://s.codepen.io/Alexaxel98/debug/kXZZVq#

heres my code

I did the *{border:thin solid red} to see exactly where all my borders were and they all seem to be in place, i dont know why i have a huge space between the wayyy bottom of the page and the footer?

I tried googling this issue but found no answers, so maybe you guys have an idea !? please help! thanks in advance :smiley:

2

The first question you have to answer is, How would you like this to look on bigger displays? I see two options:

  1. Fix the footer to the bottom of the page
  2. Make the container div grow to fit the page

I would do both, as the content should fill out the screen on larger displays. The first thing I tried was to add this

.container {
  height: 30vh;
}

This would require tweaking the position of the elements within the container, but seemed to push the footer down. You’d have to play with the number to get it perfect. As for the footer, you might want to take a look at this trick, Sticky Footer.

3

the .container 30 vh works but that would mean setting up a whole different environment for anything larger than 2000 in height… that would mean resizing all the elements !

isnt there a better way? i looked the link you gave and attempted the

encompassing all the body, but not even that worked… im completely stumped :/… there has to be a better way! aaahhhhh

thanks though man i appreciate your help