Hello, you have done the style code for the Slider type earlier here: https://www.8theme.com/topic/change-the-background-on-the-product-block/#post-415229, but how else can I add a style to the Grid type?
This topic has 11 replies, 2 voices, and was last updated 2 weeks, 3 days ago ago by Luca Rossi
Hello, you have done the style code for the Slider type earlier here: https://www.8theme.com/topic/change-the-background-on-the-product-block/#post-415229, but how else can I add a style to the Grid type?
Dear @Goostaf,
We hope this message finds you well.
Since each section has a different background color, it is necessary to assign a specific class (e.g., pink, blue, purple, etc.) to each section accordingly. Once the appropriate classes are set, you may apply the following custom CSS code:
.blue .products-slider .swiper-slide {
background-color: rgba(228, 241, 253, 0.3) !important;
box-shadow: none;
}
.pink .products-slider .swiper-slide {
background-color: rgba(253, 244, 248, 0.5) !important;
box-shadow: none;
}
.purple .products-slider .swiper-slide {
background-color: rgba(230, 226, 252, 0.3) !important;
box-shadow: none;
}
Please feel free to reach out if you have any further questions or need additional assistance.
Best regards,
The 8Theme Team
I probably described it wrong, I also need to add a white background to the product cards with the grid type, as I understand it, you need to add something like: .products-slider .swiper-slide .product-grid (this does not work) {
background-color: #fafafa !important;
}
Hi @Goostaf,
Please try with this custom CSS code instead:
.products-grid > div.product {
background-color: #fff;
}
@media (min-width: 980px){
.products-grid {
gap: 10px;
}
.row-count-6 .product {
width: calc(16.66666667% - 10px);
}
}
Hope it helps!
With your code, everything shifts, that’s almost what you need, but margin also shifts the cards and does not fit 6 in a row.
.products-grid > div.product {
background-color: #fefefe !important;
box-shadow: 0 20px 30px rgba(53, 51, 57, .06);
border-radius: 10px;
margin:3px;
}
Now it’s like this without margin, but I would like to add it without shifting the products (6 in a row as it is done below)
Hi @Goostaf,
Please add this custom CSS codes also:
@media (min-width: 980px){
.products-grid {
gap: 10px;
}
body .row-count-6 .product {
width: calc(16.66666667% - 10px) !important;
}
}
Let us know how it goes!
Thanks, but can I level up some more?
Hi @Goostaf,
Please add this custom CSS instead:
@media (min-width: 980px){
body .row-count-6 .product {
width: calc(16.66666667% - 10px) !important;
margin: 0 5px 10px !important;
}
}
Hope it helps!
Thank you, but can I do the same on my mobile?
Hi @Goostaf,
For mobile, please add this code also:
@media (min-width: 980px){
body .row-count-6 .product {
width: calc(50% - 10px) !important;
margin: 0 5px 10px !important;
}
}
Hope it helps!
You must be logged in to reply to this topic.Log in/Sign up