CODEWITHSUNDEEP
jqueryimagecsshtml
WASasquatch
WASasquatch

Reputation: 629

Unusual space when window resized small

When you make the window a small size it creates a giant blank space on the right-hand side of the viewport. I've tried hiding the overflow in both the master containers and the header, with no change.

Live code http://jordan.rave5.com/tmptemp/

jQuery Code

        // Control Resize
        $(window).load(function() {

            var header = $('#header'),
                imageGrad = $('.image-grad'),
                image = $('.header-img'),
                headerBg = $('#header'),
                headerSource = $('.header-img'),
                wWidth = $(window).width();

            function resizeDiv () {
                imageGrad.height(image.height());
                imageGrad.width(wWidth);
                headerBg.css({'background-size': + image.width() + 'px ' + image.height() + 'px'});
                $(headerBg).blurjs({
                    source: headerSource,
                    radius: 8,
                    overlay: 'rgba(0,0,0,0.50)'
                });
            }

            resizeDiv();

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

        });

Upvotes: 0

Views: 81

Answers (1)

Kaloyan
Kaloyan

Reputation: 7352

Take a look at your code :

wWidth = $(window).width(); is defined outside the function that is called when the window is resized. That means wWidth gets a value on window load and that value never changes. When you shrink the window .image-grad breaks the layout because its width is always equal to the initial window size.
You should put that line inside the resizeDiv() function.

Upvotes: 1

Related Questions