Bootstrap 4 Modal Background not responsive on mobile - html

Question

<script type="text/javascript">
$(window).on('load',function(){
$('#loginerrormodal').modal('show');
});
</script>
<div class="modal fade" tabindex="-1" role="dialog" id="loginerrormodal">
<div class="modal-dialog" role="document">
<div class="modal-content bg-white">
<div class="modal-header">
<h5 class="modal-title">...</h5>
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
<div class="modal-body">
...
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-dismiss="modal">Chiudi</button>
</div>
</div>
</div>
</div>
When I run the modal on mobile, the black background isn't responsive:
(the modal opes at page load so I don't have buttons to launch it)
How I can fix?

Answer 1

As it's possible to see in the live version you provided, there is an element exceeding the total width of the device, which is disturbing the modal.
Find the <div> with classes "card", "bg-white" and "mx-auto" and remove the inline style of width: 30rem for mobile devices breakpoint (480px).
If that's not possible, you can create a media query using !important to override the inline style, like this:
#media (max-width: 480px) { // the breakpoint that the problem is ocurring
.card.bg-white.mx-auto {
width: 100% !important; // it should work instead of 30rem
}
}

Answer 2

I fix with this:
.modal-backdrop {
height: 100%;
width: 100%;
}