將手機的顯示器產品更改爲1列

Question

我的網站改編爲手機，但在2列中顯示產品。 我可以在1列中更改手機的顯示嗎？ 這裏的working website 這裏的my test website 網站在WordPress和WooCommerce上工作 可能有人知道這個改變是怎麼回事？

Answer 1

只需添加一點點CSS來調整產品li元素的寬度。就像這樣：

@media screen and (max-width: 1024px) { 
    ul.products li.product { 
     width: 96%; 
    } 
} 

這將使任何屏幕少於1024像素寬的一列。如果需要，您可以調整該數字以僅影響較小的屏幕尺寸。