css - WP 图库问题，在移动设备上没有响应

Question

我正在帮助 friend 组织/艺术场所清理和翻新网站。

我们正在制作过去几年业务的图片库。查看其中一个画廊的链接-> http://www.stallbergsgruva.se/2018-2/

我的问题是，当我在移动设备(Android 和 Iphone)上查看页面时，图库融合在一起并且显示效果不佳。例如，最好将它们全部放在一列或两列中，但图集分开并且不会像现在这样弄脏在一起。

我正在寻找一些 CSS 代码来处理这个问题。我尝试了一堆在类似问题上发现的不同代码，但没有任何影响我的画廊。我对这段代码很陌生，所以我错过了什么？

我是代码的初学者，但如果您添加更详尽的代码描述以及添加代码的位置等，我可以处理它。

提前致谢!//埃里克

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%;
}
}