How to make modals more responsive

[rbozan]

Hey.

You can easily make the modals more responsive. I can see the JavaScript currently calculates the position to get in the center of the current screen, but why don't you let that to the browser?

First add this style to the modal:
.modal { max-height: 90%; max-width:90%; }

This makes a margin of 5% on each sides. Change however you want. Then, with JavaScript, set the modal width + height to the current width + height of that modal (like so: $(".modal").width($(".modal").width()); and the same for height).

Then add this CSS style:
left:0; right:0; top:0; bottom:0; margin:auto;

Done. This way the modal is always centered, it's also responsive and it works on mobile + desktop accordingly. Max-width and max-height are used for the mobile platforms and the widths and heights for the desktops.

(sorry for writing it as issue instead of doing a pull request. The Github editor is laggy for me).

[Dogfalo]

Great tip! I modified it slightly.

fixed in 929f240