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

**URL:** <https://forums.knack.com/t/here-is-some-custom-css-to-make-the-modal-view-wider-but-with-a-fixed-max-width/6876>\
**Category:** Show & Tell\
**Created:** [December 21, 2018, 7:39pm UTC](https://forums.knack.com/t/here-is-some-custom-css-to-make-the-modal-view-wider-but-with-a-fixed-max-width/6876 "2018-12-21T19:39:07Z")\
**Posts on this page:** 3\
**Page:** 1

<div class="post-metadata">

**Author:** ![TannerClay98353](https://avatars.discourse-cdn.com/v4/letter/t/3e96dc/32.png) [@TannerClay98353](https://forums.knack.com/u/TannerClay98353)\
**Post date:** [December 21, 2018, 7:39pm UTC](https://forums.knack.com/t/here-is-some-custom-css-to-make-the-modal-view-wider-but-with-a-fixed-max-width/6876/1 "2018-12-21T19:39:07Z")

</div>

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

---

<div class="post-metadata">

**Author:** ![RogerNeal13907](https://avatars.discourse-cdn.com/v4/letter/r/82dd89/32.png) [@RogerNeal13907](https://forums.knack.com/u/RogerNeal13907)\
**Post date:** [July 28, 2019, 3:43pm UTC](https://forums.knack.com/t/here-is-some-custom-css-to-make-the-modal-view-wider-but-with-a-fixed-max-width/6876/2 "2019-07-28T15:43:53Z")

</div>

This works very well - thank you

---

<div class="post-metadata">

**Author:** ![SamCarney81930](https://avatars.discourse-cdn.com/v4/letter/s/bbce88/32.png) [@SamCarney81930](https://forums.knack.com/u/SamCarney81930)\
**Post date:** [December 31, 2018, 10:16pm UTC](https://forums.knack.com/t/here-is-some-custom-css-to-make-the-modal-view-wider-but-with-a-fixed-max-width/6876/3 "2018-12-31T22:16:16Z")

</div>

Tanner,

Thanks for sharing! This is good stuff!