WP画廊问题，在移动设备上没有响应

Question

我正在帮忙清理和翻新一个朋友组织/艺术场所的网站。

我们正在对过去几年的业务图像画廊工作。请参阅指向其中一个图库的链接-> http://www.stallbergsgruva.se/2018-2/

我的问题是，当我在移动设备(Android和Iphone)上查看页面时，Gallerys会融合在一起，并且不能很好地显示。例如，如果它们都放在一列或两列中，但地图集是分开的，而不是像现在这样混杂在一起，那就太好了。

我正在寻找一些CSS代码，照顾这一点。我已经尝试了一堆不同的代码，我发现类似的问题，但没有任何影响我的画廊。我对这个代码很陌生，我错过了很多东西吗？

我是一个代码的初学者，但如果你添加一个更全面的描述什么代码和在哪里添加它，等等，我可以处理它。

提前感谢您！// Erik

Answer 1

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

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

在需要此结果的分辨率下将其更改为.gallery-width:100%。有关媒体查询的更多信息，请访问

Media Queries

Code Screenshot inside colsole

所以在你的例子中，让我们假设你需要600px的结果，这是媒体查询的样子，需要添加到css文件中：

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