WooCommerce Shopのページ行を修正しました

Question

私のショップページでは、タブレットと携帯電話のランドスケープモードでは、すべての製品が隣り合って表示されていません。彼らはギャップを残すので、2つの製品があり、時には1つの製品が並んでいることもあります。 CSSで試したところ、解決策が見つかりませんでした。私の目標は、それらをお互いに隣り合わせにして、縦型電話機ではなく、縦型電話機で最低2つ連続して表示することです。これどうやってするの？ここで

は、私のサイトです：https://malimo.co/shop/

あなたがコンピュータの画面上でウェブサイトを開くと、単にブラウザのウィンドウを小さくすると、あなたはそれが表示されます）

Answer 1

に余裕-権を設定します。それは画面の幅以上です。景観上 は、あなたはそれが

を0PXまたは低い値に50％を変更するには、この

@media (max-width: 767px) and (min-width: 560px) 
    .theme__product__item--col__3:nth-child(3n) { 
     margin-right: 15px; 
} 

変更を持っています。例えば46％。

@media (max-width: 767px) and (min-width: 560px) 
.theme__product__item--col__3 { 
    width: calc(50% - 7.5px);   
} 

Answer 2

私はこの問題を並べ替えると思います。あなたは50％+マージンへの製品の幅を設定0

@media (max-width: 992px) and (min-width: 768px) 
{ 
    .theme__product__item--col__3:nth-child(3n) { 
     margin-right: 0; 
    } 
} 

Answer 3

は、私はあなたが10

@media (max-width: 767px) and (min-width: 560px) 

.theme__product__item--col__3 {` 

    width: calc(45% - 7.5px);   
} 

に余裕-権を設定すべきだと思います