Dash Theme Tutorials

Print

Additional styles for correct product categories output on Shop page

In case of Product Categories overlapping on your Shop page, the best and optimal solution will be to restyle these elements. The code below does the job. Copy styles below and paste straight to WordPress Customizer’s Additional CSS field:

/*-------------Product categories overrides-------------*/
ul.products li.product-category {
width:25%;
text-align:center;
}
ul.products li.product-category h3 {
font-size:17px;
}
ul.products li.product-category h2 {
font-size:25px;
}
ul.products .product-category img {
width:100%;
height:auto;
}
.product-category .count {
background:transparent;
color:#f7972b;
} 
@media(max-width:480px) {
ul.products li.product-category {
width:50%;
text-align:center;
}
ul.products li.product-category h3 {
font-size:22px;
}
}

Leave a Reply

Your email address will not be published. Required fields are marked *