Woocommerceの店舗ページのコンテンツ領域の幅を広げ、サイドバーを維持

Question

コンテンツ領域とサイドバーを囲むラッパーの幅を広げて、より多くの側面を占める方法を解明しようとしています。私は1行につき少なくとも4つの製品で大きな画像を表示したい。

グリッドクラスのサイズと同様にスタイルシートのラッパーの幅を変更しようとしましたが、サイドバーが下に落ちるか、行ごとに4つの製品に設定されても製品が同じ行に残りません。

私は見つけることができるすべてのCSSの幅をつぶしてみましたが、何も動作していないようです。

誰でもこれを解決する方法について考えていますか？私が見つけたすべての解決策は私にとってはうまくいかないようです。ありがとう。

私のサイトは私が最終的に私はそれを見てみたいどのようにそれを得たと思うwww.Lucidwerx.com

.wrapper, 
.layout-boxed {margin-left:auto;margin-right:auto} 

.grids{margin-left:-30px} 
.grid-1,.grid-2,.grid-3,.grid-4,.grid-5,.grid-6,.grid-7,.grid-8,.grid-9,.grid-10,.grid-11,.grid-12{display:inline;float:left;margin-left:30px} 
.grid-12{margin-right:0} 

.grid-4:nth-child(3n+1) {clear:left;} 
.grid-8 .grid-4:nth-child(3n+1), 
.grid-8 .grid-2:nth-child(3n+1) {clear:none;} 
.grid-8 .grid-4:nth-child(odd), 
.grid-8 .grid-2:nth-child(4n+1) {clear:left;} 

/* Grid 1080px */ 
.wrapper{width:1050px} 
.grid-1{width:60px}.grid-2{width:150px}.grid-3{width:240px}.grid-4{width:330px}.grid-5{width:420px}.grid-6{width:510px}.grid-7{width:600px}.grid-8{width:690px}.grid-9{width:780px}.grid-10{width:870px}.grid-11{width:960px}.grid-12{width:1500px} 
.layout-boxed {max-width:1500px;} 

/* Grid 960px (mediaqueries) */ 
@media only screen and (min-width: 960px) and (max-width: 1199px) { 
.wrapper{width:930px} 
.grid-1{width:50px}.grid-2{width:130px}.grid-3{width:210px}.grid-4{width:290px}.grid-5{width:370px}.grid-6{width:450px}.grid-7{width:530px}.grid-8{width:610px}.grid-9{width:690px}.grid-10{width:770px}.grid-11{width:850px}.grid-12{width:910px} 
.layout-boxed {max-width:990px;} 
} 

/*Grid 750px (mediaqueries)*/ 
@media only screen and (min-width: 751px) and (max-width: 959px) { 
.wrapper{width:700px} 
.grids{margin-left:-20px} 
.grid-1,.grid-2,.grid-3,.grid-4,.grid-5,.grid-6,.grid-7,.grid-8,.grid-9,.grid-10,.grid-11,.grid-12{margin-left:20px} 
.grid-1{width:40px}.grid-2{width:100px}.grid-3{width:160px}.grid-4{width:220px}.grid-5{width:280px}.grid-6{width:340px}.grid-7{width:400px}.grid-8{width:460px}.grid-9{width:520px}.grid-10{width:580px}.grid-11{width:640px}.grid-12{width:680px} 
.layout-boxed {max-width:730px;} 
} 

/* Mobile (mediaqueries) */ 
@media only screen and (max-width: 750px){ 
.grids, 
.grid-1,.grid-2,.grid-3,.grid-4,.grid-5,.grid-6,.grid-7,.grid-8,.grid-9,.grid-10,.grid-11,.grid-12{width:100%;margin-left:0;margin-right:0} 
html{font-size:1.125em} 
body{-webkit-text-size-adjust:none} 
} 

@media only screen and (min-width: 480px) and (max-width: 750px) { 
.wrapper{width:417px} 
} 

@media only screen and (max-width: 479px) { 
.wrapper{width:273px} 
} 

@media only screen and (max-width: 240px) { 
.wrapper{width:200px} 
} 

[class*="grid-"] .wrapper{width:100%} 

です。

Answer 1

3つの製品しか追加していないため、このコードを適切にテストできませんでしたが、ページのレイアウトを改善するCSSがいくつかあります。理想的には、ページ・テンプレートを変更して、製品とウィジェット列に使用されるクラスを変更して、製品に余裕を持たせ、フィルターを小さくする必要があるでしょう。現時点では、製品は 'grid-8'クラスでラップされています。以下のコードは、値を使って遊ぶことができるいくつかの改善を提供します。小さな画面のデバイスでは、製品がフルスクリーン幅で表示されるように、メディアクエリを追加します。それをあなたのstyle.cssに挿入するか、あなたが使っているテーマのコンソールを使って挿入してください。

.wrapper { 
    width: 95% !important; 
} 
.woocommerce ul.products li.product, .woocommerce-page ul.products li.product { 
    width: 22% !important; 
}