Fetch as Google viewport issue

Recently I’ve had a problem with a website I’ve built for a friend. It was ranking poorly on Google, way worse then it’s supposed to be.

After some research I turned to webmaster tools and saw the strangest thing, fetch as google render didn’t show anything above fold. There was a Huge gap between top and content start. If google crawler really saw empty space instead of content above fold it could be the root of my ranking problems.

After much pain I found the cause. I’ve been using javascript to find size of users viewport and then resized “hero” block to fit entire viewport.

function setHeight() {
    windowHeight = $(window).innerHeight();
    $(".cover,.heightblock").css('min-height', windowHeight);
};

setHeight();

$(window).resize(function() {
    setHeight();
});

This works fine and it’s a widely used technique. Problem is that google bot has viewport size of 3454px. Since my hero block’s height wasn’t even close to that it ended up in vertical middle, way below fold.

I ended up not covering entire viewport, instead using padding percentage.