Fluid Header/Footer problem when windows resized or opened on mobile (desktop view)

This is a very common issue I have seen on various websites, generally in websites which is not responsive. Look at this image to understand this issue quickly.

This image is quite descriptive itself. If you notice such issue in your website, this blog post is for you.

There may be many ways to resolve this, but the way we are going to learn here is jQuery way. There are two situations this issues appears, when browser resized or website opened on smaller devices.

This quick jQuery function will fix this issue:

function fixFluid(element)

{

    $(element).width(0);

    $(element).css('width', ($(document).width() + "px"));

}

Now you can call above function from two places:

i) When browser resized

$(window).resize(function () { fixFluid(".Header"); fixFluid(".Footer"); });

ii) When opened on smaller devices

$(document).ready(function () {

    fixFluid (".Header");

    fixFluid (".Footer");

});

Notice I’m using class selectors ‘Header’ and ‘Footer’, you need to pass your own selectors.

Hope this helps.