锐客网

  1. 首页 > 睿知 > it技术 > >

修复WooCommerce Shop页面行

WordPressIT知识问答css网站开发页面商店页面修复页面行

在横向模式下的平板电脑和手机上的我的商店页面上, 并非所有产品都相邻显示。它们之间留有空隙, 因此有时有两种产品, 有时只是连续一种产品。我尝试使用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; } }

    推荐阅读


    上一篇：在WordPress中查找Google字体的来源

    下一篇：在H3标签旁边向右浮动图片