5 列项目列表在移动设备上真的很糟糕，我该如何解决这个问题？

Question

我这里有一个商业目录是https://www.endustri.io/firma/

我在五列中列出了类别。当我看到手机时，我感到震惊。真难看。如何解决这个问题？ 我希望看到移动版看起来像桌面版，或者比这次更好。

这是我的CSS代码

#native {
  
  width: 100%;
  height: min-content; /*your fixed height*/
  display: inline-block; /*necessary*/
    -webkit-column-count: 5;
       -moz-column-count: 5;
            column-count: 5;
  
  
}

这是桌面

这是移动的

Answer 1

例如，您可以通过将移动设备上的 column-count 更改为 2 来解决此问题。您可以使用特定范围的 @media screen 定位移动设备：

@media screen and (max-width: 767px) {
  #native {
    -webkit-column-count: 2;
    -moz-column-count: 2;
    column-count: 2;
  }
}