Responsive Full Container Width Script

example.html

<div data-hmd-full-width data-hmd-min-breakpoint="0" data-hmd-max-breakpoint="767"
  style="position: relative; background-color: green;">
  Example
</div>

full-container-width.js

/**
 * UI Scripts
 */

var hmdDoUI;
var hmdUI;

hmdDoUI = (function($) {

    return function(callback) {

        if (typeof callback === 'function') {

            // Visual Composer Only
            if (window.location.search.indexOf('vc_editable') > -1) {
                setTimeout(function() {
                    callback();
                }, 300);
            }

            $(function() {

                var timeout;

                setTimeout(function() {
                    callback();
                }, 300);

                $(window).on('resize', function() {
                    clearTimeout(timeout);

                    timeout = setTimeout(function() {
                        callback();
                    }, 50);
                });

                if (typeof window.addEventListener !== 'undefined') {
                    window.addEventListener("orientationchange", function() {
                        clearTimeout(timeout);

                        timeout = setTimeout(function() {
                            callback();
                        }, 50);
                    }, false);

                    window.addEventListener("deviceorientation", function() {
                        clearTimeout(timeout);

                        timeout = setTimeout(function() {
                            callback();
                        }, 50);
                    }, true);
                }

            });

        }
    }

})(jQuery);

hmdUI = (function($) {

    var hmdUI = function( key, value ) {
        return new hmdUI.init( key, value );
    };

    hmdUI.init = function( key, value ) {

    };

    hmdUI.init.prototype.windowWidth = function() {
        return window.innerWidth
            || document.documentElement.clientWidth
            || document.body.clientWidth
            || $(window).width();
    }

    hmdUI.init.prototype.fullContainerWidth = function(selector, closestParent, minBreakpoint, maxBreakpoint) {

        var $selector = $(selector),
            $parent = $(selector).closest(closestParent)

        if ($selector.length === 0 || $parent.length === 0) {
            return this;
        }

        $selector.css('margin-left', '');
        $selector.css('margin-right', '');

        maxBreakpoint = typeof $selector.data('hmd-max-breakpoint') !== 'undefined'
            ? $selector.data('hmd-max-breakpoint') : maxBreakpoint;

        minBreakpoint = typeof $selector.data('hmd-max-breakpoint') !== 'undefined'
            ? $selector.data('hmd-min-breakpoint') : minBreakpoint;

        if ((typeof maxBreakpoint !== 'undefined' && this.windowWidth() > parseInt(maxBreakpoint))
            || (typeof minBreakpoint !== 'undefined' && this.windowWidth() < parseInt(minBreakpoint))) {
            return this;
        }

        var margins = (($parent.width() - $selector.outerWidth(true))/-2);

        $selector.css({
            'margin-left' : margins+'px',
            'margin-right' : margins+'px'
        })

        return this;

    }

    return hmdUI;

    //hmdUI().fullContainerWidth('.signup-panel', 'body', 0, 767)
})(jQuery);

;(function($) {
    $(function() {
        hmdDoUI(function() {
            hmdUI()
                .fullContainerWidth('[data-hmd-full-width]', 'body')
        });
    });
})(jQuery);