Here is some custom CSS to make the Modal view wider but with a fixed max width

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;
}
}

This works very well - thank you

Tanner,

Thanks for sharing! This is good stuff!