幅をカスタマイズする際のWoocommerce製品レイアウトの問題

Question

私はWordpressのプラグイン "Woocommerce"を使用しています。

私の製品の標準的な4列のレイアウトは、ブラウザの幅が狭くなったときにすべてが小さすぎるという意味では不満でした。そのため、メディアクエリを使用して3つに変えようとしましたブラウザが-1250pxに達すると、列のレイアウトが表示されます。

プラグインが使用するマージンCSSにはいくつかの問題がありました。つまり、最後の製品以外のすべてにマージンがあるようにプリセットされています。 私はそれを最初にプラグインによって設定されmargin: 0 3.8% 2.992em 0;のデフォルトのマージン値を与え、右マージンを追加することによって、私はその後、第四固定

.woocommerce-page ul.products li.product:nth-child(3n+3) { margin-right: 0px; }

を使用して第四の代わりに3番目の項目をターゲットに、これを変更しました。

しかし、何らかの理由で、3番目のものの後の項目がすべての場所に浮かんでいて、理由がわかりません。

これを引き起こしている可能性があることと、それを修正する方法を教えてください。

この問題を示すサンプル・ページは、次のとおりです。http://www.lucieaverillphotography.co.uk/product-category/prints/

Answer 1

これは私に起こりました。 cssを見ると、woocommerceは行の最後の項目（またはli）に「last」のクラスを割り当て、最初の項目に「first」を割り当てます。

ウィンドウのサイズを変更して3項目構造に変更すると、最後の項目は最初のものになります。

これらのクラスをターゲットにする必要があります。特定のブレークポイントでそのプロパティを削除するか、またはすべてを削除する必要があります。 .firstおよび.lastの属性をclearから削除することから始められます。