Fix modal for phone devices (@media (max-width: 480px))

gistfile1.css

/*MODAL FIXES*/
@media (max-width: 480px) {
  .modal {
    height: 500px; /* Set a default max height of the modal (adjusted later)*/
    position: fixed; /* Display modal in the centre of your screen */
    overflow-y: scroll; /*  Ensure that the modal is scroll-able */
    -webkit-overflow-scrolling: touch; /* Avoid having to use 2 finger scroll on iOS  */
  }
  .modal.fade.in{
    top: 5px;
  }
  .modal-body{
    max-height: 2400px; 
  }  
.modal h3 {font-size:15px}
}
@media (max-width: 480px) and (max-height: 500px){.modal{ height: 450px}}
@media (max-width: 480px) and (max-height: 450px){.modal{ height: 400px}}
@media (max-width: 480px) and (max-height: 400px){.modal{ height: 350px}}
@media (max-width: 480px) and (max-height: 350px){.modal{ height: 300px}}
@media (max-width: 480px) and (max-height: 300px){.modal{ height: 250px}}
@media (max-width: 480px) and (max-height: 250px){.modal{ height: 200px}}
@media (max-width: 480px) and (max-height: 200px){.modal{ height: 150px}}