Wordpress 增加Woocommerce商店页面内容区域的宽度，保留侧边栏

我一直在试图找出如何增加包装的宽度，将内容区域和边栏作为一个整体封装起来，这样它就占据了更多的边。我想显示每行至少有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;
        }
}

---

我无法正确测试这段代码，因为您只添加了3个产品，但这里有一些CSS可以改进页面的布局。理想情况下，您可能需要修改页面模板，并更改用于产品和小部件列的类，以便为产品提供更多空间并使过滤器更小。目前，这些产品被包装在一个“grid-8”类中。下面的代码将为您提供一些改进，您可以使用这些值。我还添加了一个媒体查询，以便在较小的屏幕设备上显示全屏宽度的产品。将其插入到style.css中，或通过正在使用的任何主题的控制台插入

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

---

我无法正确测试这段代码，因为您只添加了3个产品，但这里有一些CSS可以改进页面的布局。理想情况下，您可能需要修改页面模板，并更改用于产品和小部件列的类，以便为产品提供更多空间并使过滤器更小。目前，这些产品被包装在一个“grid-8”类中。下面的代码将为您提供一些改进，您可以使用这些值。我还添加了一个媒体查询，以便在较小的屏幕设备上显示全屏宽度的产品。将其插入到style.css中，或通过正在使用的任何主题的控制台插入

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

---

很抱歉。我添加了一个额外的产品，并发布了css，似乎控制了它。我查看了grid-8类信息，它确实显示了一个固定的像素，我尝试增加宽度大小，但它看起来仍然不正确。此外，媒体查询大小似乎已经存在。是的，这取决于您希望它在移动设备上每行显示多少产品，目前看起来它每行显示2个。我将产品列表的宽度更改为22%，它显示4列产品，但这取决于您的桌面分辨率。我插入了你的代码，这就是它在我的屏幕上的外观：-图像看起来更小，它一直向左移动。是的，就像我说的，你需要修改模板和更改网格类，以便它们占据产品的大部分空间。目前，产品使用的是grid-8类，但如果使用grid-10，效果会更好。唯一的问题是，你的屏幕分辨率看起来超高，主题使用静态像素宽度而不是百分比，所以你会在大分辨率上看到很多空白。附件是我13岁时的照片“对不起。我添加了一个额外的产品，并发布了css，似乎控制了它。我查看了grid-8类信息，它确实显示了一个固定的像素，我尝试增加宽度大小，但它看起来仍然不正确。此外，媒体查询大小似乎已经存在。是的，这取决于您希望它在移动设备上每行显示多少产品，目前看起来它每行显示2个。我将产品列表的宽度更改为22%，它显示4列产品，但这取决于您的桌面分辨率。我插入了你的代码，这就是它在我的屏幕上的外观：-图像看起来更小，它一直向左移动。是的，就像我说的，你需要修改模板和更改网格类，以便它们占据产品的大部分空间。目前，产品使用的是grid-8类，但如果使用grid-10，效果会更好。唯一的问题是，你的屏幕分辨率看起来超高，主题使用静态像素宽度而不是百分比，所以你会在大分辨率上看到很多空白。附件是我13英寸笔记本电脑上的外观