Yes, this worked! Great.
Also, how can I get five products next to each other? Instead of 4..
hi
as the space is occupied by he sidebar so if you want 5 product that can mess the view
i think the 4 columns are great enough
I have no sidebar. See here: meestergijs.nl/winkel
yes. but the space will be occupied for sure
check:
http://prntscr.com/26b0bl0
i have searched the same
and found this:
https://woocommerce.com/document/change-number-of-products-per-row/
Your quote:
"yes. but the space will be occupied for sure
check: http://prntscr.com/26b0bl0"
But I can't NOT use a sidebar. How can I delete the sidebar/empty column?
hi
the space can't be removed but yes we can increase the width of the second column
Please tell me how to decrease the width of that empty column
hi
we can fix it like this:
http://prntscr.com/26byyox
use this code:
@media(min-width:1024px)and (max-width:1440px){
.shop_products.content.padder {
width: 900px !important;
margin-left: -180px !important;
}
}
It had no effect. Look for yourself: https://meestergijs.nl/winkel/
I used this code to delete the empty space. Now I still wonder if I can get 5 products next to each other. If I go to appearances/customize/woocommerce I get errors when changer 4 to 5. Are there other ways?
code used:
@media only screen and (min-width: 850px){.woocommerce-shop div.row > div.col-md-3 { display: none!important; }}
@media only screen and (min-width: 850px){.woocommerce-shop div.row > div.col-md-9 { width: 100%!important; }}
hi
use this CSS
.post-type-archive-product .main .row>.col-md-3.col-sm-4.col-3 {display:none;}
.post-type-archive-product .main .row>.col-md-9.col-sm-8.col-9 {width:100%;}
.post-type-archive-product ul.products.row.columns-4 li.col-md-3.col-sm-6.clear4.product {
width:20%;
}
.post-type-archive-product .clear4:nth-child(4n+1){
clear: none;
}
.post-type-archive-product .clear4:nth-child(5n+1){
clear: both;
}
refer:
http://prntscr.com/26ch9ce
Per-feeeeeect! Amazing. This is exactly what I meant. How do I make sure this only works on tablet horizontal and bigger? because it looks really weird on my tablet when held vertically and on my phone.
use this:
@media(min-width:768px) and (max-width:1440px) {
.post-type-archive-product .main .row>.col-md-3.col-sm-4.col-3 {display:none;}
.post-type-archive-product .main .row>.col-md-9.col-sm-8.col-9 {width:100%;}
.post-type-archive-product ul.products.row.columns-4 li.col-md-3.col-sm-6.clear4.product {
width:20%;
}
.post-type-archive-product .clear4:nth-child(4n+1){
clear: none;
}
.post-type-archive-product .clear4:nth-child(5n+1){
clear: both;
}
}
If I hold my phone horizontal the yellow Woocommerce buttons underneath the product
images don't align. So can we adjust the width a bit? What should it be?
.
