个性化阅读
专注于IT技术分析

修复WooCommerce Shop页面行

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


我认为这将解决问题。设置margin-right为0

 @media (max-width: 992px) and (min-width: 768px)
 {
   .theme__product__item--col__3:nth-child(3n) {
      margin-right: 0;
    }
 }
赞(0) 打赏
未经允许不得转载:srcmini » 修复WooCommerce Shop页面行
分享到: 更多 (0)

评论 抢沙发

评论前必须登录!

 

觉得文章有用就打赏一下文章作者

微信扫一扫打赏