I have custimized the styling of the search fields in Mendix 9.10.0 in the following way: $search-item-width: 400px; .mx-grid { .mx-grid-search-inputs { display: grid; grid-template-columns: repeat(4, minmax($search-item-width, 1fr)); } .mx-grid-searchbar { background-color: rgba(166, 232, 248, 0.452); .mx-grid-search-item { display: flex; flex-direction: column; max-width: $search-item-width; .mx-grid-search-label { text-align: left; width: $search-item-width; label { font-weight: normal; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; display: block; } } .mx-grid-search-input { font-weight: normal; font-size: 14px; width: 100%; .form-control { font-size: 14px; background-color: white; border-top: 2px solid #CCCCCC; width: 100%; } .mx-button { height: 28px; padding-top: 2px; padding-bottom: 2px; background-color: transparent; border-color: transparent; .glyphicon { position: relative; top: 1px; display: inline-block; font-family: "Glyphicons Halflings"; font-style: normal; font-weight: normal; line-height: 1; -webkit-font-smoothing: antialiased; color:#c22681; -moz-osx-font-smoothing: grayscale; } } } } } } This works fine. But when I zoom out, the 4 search items in a row, keep the same format so they disappear from the screen (see picture below). What can I do so that the search items automatically adjust to incrementing the page zoom (e.g. 125%) and always will be visible?