Hello, I’m trying to rebuild the front page from Google and faced some troubles. The main problem is that I can’t understand why my bottom div(footer) doesn’t work with different resolutions. It appears in the bottom but when I try to change resolution it somehow pops up in the middle of the page.
Yeah, I’ve tried to make a div-container that wraps this footer and applied on it “positon:relative” but it didn’t work. It didn’t work neither when I applied position:relative on body and html. So now I’m out of ideas…
Hope for your help
You’re forcing footer children to be a certain height (40px in the case), but since when the screen is small its content doesn’t fit, the content will overflow.
Remove height: 40px from .first, .second { and see if it fixes your issue.
nope, it doesn’t work. I even tried to change pixels from margin to percents but it didn’t work too
ok, I think I solved my problem
added a container that wraps all the divs and apllied on it min-height. And now it works exactly as the original google page
try changing this on .footer class
.footer { position: fixed }