Color Box Responsive Issue

[designinsist]

Here is how i have added color box in my code. <script> $(document).ready(function () { setTimeout(function () { $.colorbox({ width: "50%", inline: true, href: "#inline_content" }) }, 5000); }); </script> I am using color box for inline HTML, here is the code that i have added to make this pop up responsive that i found from github. `

var cboxOptions = { width: '95%', height: '95%', maxWidth: '960px', maxHeight: '960px', }

$('#inline_content').colorbox(cboxOptions);

$(window).resize(function(){ $.colorbox.resize({ width: window.innerWidth > parseInt(cboxOptions.maxWidth) ? cboxOptions.maxWidth : cboxOptions.width, height: window.innerHeight > parseInt(cboxOptions.maxHeight) ? cboxOptions.maxHeight : cboxOptions.height }); });

$(window).resize(function () {

    if($('#cboxOverlay').is(':visible')){
            $.colorbox.load(true);
    }

    });

</script>`

This is working for me but i have an issue that its only work if user resize browser or change orientation of the screen. As you know when user open my webpage on mobile he does not have pop up responsive until he rotate his screen. So can any body guide me that how to fix this ?