Just wanted to share some custom CSS that I made for making the default modal view wider on smaller browser windows (or screens), and with a fixed maximum width. The CSS also makes the modal view take up a larger percentage of the screen, the smaller it gets. I've added this to all of my apps. Works especially well if you are trying to squeeze 3 column forms into a modal view.
/*-------- Modal View Width --------*/
@media only screen and (max-width: 1300px) and (min-width: 1201px) {
.kn-modal {
width: 85%;
}
}
@media only screen and (max-width: 1200px) and (min-width: 1101px) {
.kn-modal {
width: 90%;
}
}
@media only screen and (max-width: 1100px) and (min-width: 800px) {
.kn-modal {
width: 95%;
}
}
@media only screen and (min-width: 1301px) {
.kn-modal {
width: 1100px;
}
}