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

EN

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