$.colorbox.resize() and mediaquery CSS do not work

[EffEPi]

<style>
.wyska-add-form{
    width: 700px;
}
@media(max-width:767px) {
    .wyska-add-form{
        width: 500px;
    }
}
@media(max-width:520px) {
    .wyska-add-form{
        width: 260px;
    }
}
.wyska-add-form-footer{
    font-size: 12px;
    color: #00F;
    margin-top: 5px;
}
.wyska-add-no-url{
    margin-left: 15px;
    cursor: pointer;
}
.wyska-add-cancel{
    margin-right: 15px;
    cursor: pointer;
}
.wyska-add-title{
    margin-bottom: 10px;
    text-align: center;
}
</style>
<script>
var timeoutResizing;
$(window).resize(function(){
    if(timeoutResizing) clearTimeout(timeoutResizing);
    timeoutResizing=setTimeout(function(){
        if($('#cboxOverlay').is(':visible')){
            $.colorbox.resize(true);
        }
    },500);
});
$.colorbox({
    fixed: true,
    href: url_wyska_add,
    maxHeight: 610,
    maxWidth: '95%' //trying to resize horizontally
});
</script>

And this is the HTML loaded

<div class="wyska-add-form">
    <div class="h3 wyska-add-title">Add a WYSKA</div>
    <div class="input-group input-group-lg">
        <div class="input-group-addon">URL: </div>
        <input type="text" class="form-control wyska-add-url" placeholder="http://" />
        <div class="input-group-btn">
            <button class="btn btn-primary">Add</button>
        </div>
    </div>
    <div class="wyska-add-form-footer">
        <div class="pull-left wyska-add-no-url">I don't have a URL</div>
        <div class="pull-right wyska-add-cancel">Cancel</div>
    </div>
</div>

When I use this code and I resize the page, the color box only resize vertically but not horizontally