在横向模式下的平板电脑和手机上的我的商店页面上, 并非所有产品都相邻显示。它们之间留有空隙, 因此有时有两种产品, 有时只是连续一种产品。我尝试使用CSS, 但找不到解决方案。我的目标是让它们彼此相邻并在竖屏电话上连续显示至少2个, 而不是一个。我怎样才能做到这一点？
这是我的网站：https://malimo.co/shop/
如果你在计算机屏幕上打开网站, 只需缩小浏览器窗口, 你将看到它)
#1你将产品宽度设置为50％+利润。那不仅仅是屏幕的宽度。在风景上你有这个
@media (max-width: 767px) and (min-width: 560px)
.theme__product__item--col__3:nth-child(3n) {
margin-right: 15px;
}
更改为0px
或将50％更改为较低的值。例如46％。
@media (max-width: 767px) and (min-width: 560px)
.theme__product__item--col__3 {
width: calc(50% - 7.5px);
}
#2我认为你应该将保证金权利设置为10
@media (max-width: 767px) and (min-width: 560px).theme__product__item--col__3 {`width: calc(45% - 7.5px);
}
#3【修复WooCommerce Shop页面行】我认为这将解决问题。设置margin-right为0
@media (max-width: 992px) and (min-width: 768px)
{
.theme__product__item--col__3:nth-child(3n) {
margin-right: 0;
}
}
推荐阅读
- 在H3标签旁边向右浮动图片
- 在WordPress中查找Google字体的来源
- 找到一个过程来检查帖子中是否存在短代码（我的尝试有误）
- 使用WordPress过滤搜索结果
- “Feeds are not available”-WordPress错误
- #yyds干货盘点# 7. ?会查新华字典不（会。Python字典已经掌握了）
- #yyds干货盘点# Prometheus Exporter cAdvisor
- #yyds干货盘点#Python - 爬虫_请求伪造
- Pandas学习笔记02处理数据实用操作