Archived topic
Show more woocommerce columns on extra large screens
5 replies · Started by Raul on June 23, 2020
Viewing posts 1–6 of 6
Hello team,
is there a way of showing more columns in woocommerce products for very large screens?
I tried this with no luck
@media (max-width: 3000px) and (min-width: 1500px) {
.woocommerce .wc-columns-container .wc-columns-5 .products {
-ms-grid-columns: (1fr)[6] !important;
grid-template-columns: repeat(6, 1fr) !important;
}
}Hi there,
Something like that should work. For example:
@media (max-width: 3000px) and (min-width: 1500px) {
.wc-columns-container.wc-columns-5 .products,
.wc-related-upsell-columns-5 .related ul.products,
.wc-related-upsell-columns-5 .up-sells ul.products {
grid-template-columns: repeat(6,minmax(0,1fr));
}
}Works perfectly!
Could it be possible to resize the .left-sidebar accordantly? It is set up to 20% on theme customize options, but I would like it to be 25% for that media query. I tried the following with no luck...
#left-sidebar .widget-area .grid-20 {
width: 25%;
}
#left-sidebar .widget-area .pull-80 {
left: -75%;
}Can you please take a look?
Hi there,
Try adding this CSS within that media query:
.woocommerce.left-sidebar #left-sidebar {
left: -75%;
width: 25%;
}
.woocommerce.left-sidebar #primary {
left: 25%;
width: 75%;
}Thanks David and Tom,
this works great!
Glad we could be of help
This archived topic is closed to new replies.
