Simple List section - Force the number of columns on mobile screens

Site URL: https://www.savvy-executive-search.com/

I have a simple list section comprising of 4 columns.  This works well on larger screen sizes but on a tablet, the list becomes 3 across and 1 below.

But on a tablet screen in landscape this happens

Is there a way that I can force 4 columns on a tablet landscape screen?

I have tried this CSS but to no avail!

@media (min-width:1024px) {

section[data-section-id="62bbb8e067b9fa4d2977a3f5"]  .user-items-list-item-container {
    grid-template-columns: 1fr 1fr 1fr 1fr;
  }

}

Any help would be greatly appreciated.

Add to Design > Custom CSS

@media screen and (max-width:1024px) and (min-width:768px) {
.user-items-list-item-container[data-section-id="62bbb8e067b9fa4d2977a3f5"] {
    grid-template-columns: repeat(4,1fr) !important;
}
}

10 hours ago, tuanphan said:

Add to Design > Custom CSS

@media screen and (max-width:1024px) and (min-width:768px) {
.user-items-list-item-container[data-section-id="62bbb8e067b9fa4d2977a3f5"] {
    grid-template-columns: repeat(4,1fr) !important;
}
}

 

Thank you Tuan.  Greatly appreciate your help.