Please don't delete or close this question I put my question here after full three days search.
My responsive website has many modals to display blocks of data. The modal works fine with the default width on browser and small devices.
When I increase modal width for browsers with in % (percentage) it works fine in only browser. But do not display properly in mobile phones and other devices.
I tried % with min-width etc etc but no luck... also boostrap modal documentation has no information regarding size. only there is a small and large size is available which do not fit to my requirements.
Secondly I am oppening the modals using JS code as:

$(".modal-body").html("Loading...");
        $(".modal-body").load("fdeed.php");
        $("#modal_appointments").modal();
        $('#modal_appointments').modal('show');

Please, help me how I change the width so that it works fine in all devices. Any kind of help is highly appreciated. Thank you.