Hoi,
Iets in het stylesheet van je thema veroorzaakt dit. Heb je zelf ook wijzigingen aan het stylesheet aangebracht?
Guido
Hallo Guido,
Bedankt voor je reactie.
Ik gebruik een childtheme, en het originele theme geeft hetzelfde resultaat. En daar heb ik 100% niets aangepast.
Mocht je me een beetje de juiste kant op denken te kunnen sturen heel erg graag. Heb er een 2e probleem bij zag ik vandaag, dus als ik er al 1 kan oplossen is dat een grote winst 🙂
Hoi,
WooCommerce gebruikt z’n eigen styling om de kolommen op een juiste manier weer te geven. Jouw thema overschrijft dit, maar die CSS is blijkbaar verouderd / onjuist. Omdat het thema niet meer bijgewerkt wordt raad ik je aan om de betreffende CSS uit het stylesheet van je thema te halen. Het betreft thema-bestand style.css
Zoek naar:
/*--------------------------------------------------------------
# Woocommerce
--------------------------------------------------------------*/
Verwijder dan deze blokken CSS die eronder staan:
@media (min-width: 769px) {
.woocommerce ul.products li.first, .woocommerce-page ul.products li.first {
clear: none;
}
.woocommerce ul.products.columns-5 li.product,
.woocommerce-product-loop ul.products.columns-5 li.product {
width: 33.33333%;
margin: 0;
padding: 0 15px 60px 15px;
}
.woocommerce ul.products.columns-5 li.product:nth-of-type(3n+1),
.woocommerce-product-loop ul.products.columns-5 li.product:nth-of-type(3n+1) {
clear: left;
}
.woocommerce-product-loop:not(.single) .site-content > .container {
padding-left: 30px;
padding-right: 30px;
}
}
@media (max-width: 400px) {
.woocommerce ul.products.columns-5 li.product,
.woocommerce-product-loop ul.products.columns-5 li.product {
width: 100%;
padding: 15px;
}
.woocommerce-product-loop:not(.single) .site-content > .container {
padding-left: 30px;
padding-right: 30px;
}
}
@media (min-width: 1024px) {
.woocommerce ul.products.columns-5 li.product,
.woocommerce-product-loop ul.products.columns-5 li.product {
width: 20%;
margin: 0;
padding: 0 15px 60px 15px;
}
.woocommerce ul.products.columns-5 li.product:nth-of-type(3n+1),
.woocommerce-product-loop ul.products.columns-5 li.product:nth-of-type(3n+1) {
clear: none;
}
.woocommerce-product-loop:not(.single) .site-content > .container {
padding-left: 90px;
padding-right: 90px;
}
.woocommerce ul.products li.first, .woocommerce-page ul.products li.first {
clear: left;
}
}
Dank je wel Guido,
Helaas heeft dit niet geholpen. Bedankt voor de moeite.
Hoi,
Denk dat je de cache van je browser even moet legen. Of in andere browser moet proberen.
Guido
Like a charm!!
Thanks, dat ik daar zelf niet op ben gekomen 😉
Op naar probleem 2!
Valt me wel op dat de afbeeldingen op een overzichtspagina met categorieën / producten nu wel een slag kleiner zijn als eerder. Blijkbaar vergrootte jouw thema die afbeeldingen. Maar dit is alleen zichtbaar in een groot scherm.
Probleem 2? Neem aan dat je een topic opent als je er zelf niet uitkomt 😉
Als je verder geen vragen meer hebt, wil je dan de status van dit topic op opgelost zetten?
Guido
Klopt inderdaad, dat was mij ook opgevallen, maar vindt het vooralsnog niet storend 🙂
Nogmaals bedankt.
Ja ik duik er eerst zelf weer in.
