Question

I am creating a site here, to replicate the functionality of Chanel’s website.

Currently the re-sizing works width wise but when it comes to height I can’t for the life of me get it to work correctly so that the image is centered and just a bit above the footer. All my images are 1920 x 1080 just as Chanel has. Also Chanels site if you scroll just a bit down it pulls the bottom half up automatically where as I only got it to work with just the button.

When I view the page on an iPad only about 75% of the site shows up. I thought it was do to the more buttons padding but that was not the issue.

Thanks!

Answer 1

Also Chanels site if you scroll just a bit down it pulls the bottom
half up automatically where as I only got it to work with just the
button.

This is because the div at the top is fixed or absolute. The “bottom half” probably has a top margin of 100% that only becomes visible on scroll.

It “pulls up automatically” via javascript; if you turn javascript off acts normally. To do that, they probably use something like document.body.onscroll = function() { ...animation... }.

The CSS for the div#languages.popin (id = languages, class = popin) is as follows:

.popin {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 900px;
    height: 600px;
    margin-top: -300px;
    margin-left: -450px;
    background: none repeat scroll 0% 0% rgb(255, 255, 255);
    z-index: 150;
    overflow: hidden; 
}

I assume by following that, you’ll get similar results. Try out firebug, or a variant thereof, and inspect the elements to find parts you may have forgotten.