使WordPress图库响应

时间:2020-07-29 作者:pttony

我在我的主页上使用了一个4列的本地wordpress图库:https://www.peace-ed-campaign.org/ (请参见滑块下方)。

在移动设备上查看时,这4列/图像并排显示,缩小到无用的程度。我希望手机能够快速响应2张或1张图像。。。

我在这里看到了一些关于这个的线索。。。但所有答案都可以追溯到2018年。似乎再也没有了。有人有什么建议吗?

我尝试过的其他线程:

How to Make Wordpress Default gallery responsive on mobile?

Making WordPress Gallery (.gallery-item) Responsive?

目前尝试此操作时运气不佳:

/* For displaying single column on mobile */

@media only screen and (max-width: 480px) {
 .gallery-columns-4 .gallery-item {
     width: 100%;
 }
}

.gallery-columns-4 .gallery-item:nth-child(4n+1) {
     clear: none;
}

1 个回复
SO网友:alam7o

也许你需要设置max-width 只需添加max-width:100% 低于您的代码

@media only screen and (max-width: 480px) { 
 .gallery-columns-4 .gallery-item { 
   width: 100%;
   max-width: 100%;
 } 
}

相关推荐

responsive screen not working

我已经试着让它像这样响应:https://www.w3schools.com/css/tryit.asp?filename=tryresponsive_image2, 我希望它像图像一样收缩,无论它中的屏幕是什么,它都会在位置上匹配,想象一下我放入每个框中的图像,但似乎失败了。https://jsfiddle.net/hnrfhyag/20/