Question

我正在为朋友组织/艺术场所清理和翻新网站。

我们正在研究最近几年的业务图库。请参阅指向其中一个画廊的链接-> http://www.stallbergsgruva.se/2018-2/

我的问题是，当我在移动设备（Android和Iphone）上查看页面时，图库融合在一起并且无法很好地显示。例如，将它们全部集中在一两列中，但将图集分开并且不像现在那样弄脏，将是很好的。

我正在寻找可以解决此问题的CSS代码。我曾尝试过在类似问题上发现的许多不同代码，但没有任何影响我的画廊的东西。我对这段代码陌生，以至于我错过了一些东西？

我是代码的初学者，但是如果您对什么代码以及在何处添加更详尽的描述等，则可以解决。

先谢谢您！ // Erik

Answer 1

这可以通过在媒体查询中定义宽度来完成。我看到您已经定义

.gallery-width: calc((100% - 16px)/2

根据需要的分辨率将其更改为.gallery-width:100%。有关媒体查询的更多信息，请参见

因此，在您的情况下，让我们假设您需要此结果最多600像素，这就是媒体查询的外观，需要将其添加到css文件中：

@media screen and (max-width: 600px) {
  .wp-block-gallery .blocks-gallery-item{
     width :100%;
}
}