Question

我一直在试图弄清楚如何增加封装内容区域和侧边栏的包装器的宽度，以便它占用更多的边。我想显示每行至少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%}

我想我终于明白了我想要的样子。我用过这个：

.wrapper {
    width: 80%;
}

.woocommerce ul.products li.product, .woocommerce-page ul.products li.product {
 width: 29%;
 }

.sidebar {
    width: 60%;
}

@media only screen and (max-width: 736px) 
{
       .woocommerce ul.products li.product, .woocommerce-page ul.products li.product
        {
                width: 98% !important;
        }
}

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;
}

在Woocommerce商店页面上增加内容区域的宽度，保持侧边栏

1 个答案: