Blogs

Hello @shwetaarya

Yes you can manage this with custom CSS. Please add below CSS to WordPress Customizer or your theme / child theme style.css

.bdp-post-masonry.bdp-effect-2 .bdp-post-grid:nth-child(5n+1) .bdp-post-grid-content {
? background: #fd6420;
}
.bdp-post-masonry.bdp-effect-2 .bdp-post-grid:nth-child(5n+2) .bdp-post-grid-content {
? background: #3aadaa;
}
.bdp-post-masonry.bdp-effect-2 .bdp-post-grid:nth-child(5n+3) .bdp-post-grid-content {
? background: #98b446;
}

I hope it will work for you ??

Hello @pluginandplay,

Thank you reply ??

Its CSS code working fine but the issue is when I changed the 5n+1 to 2n+1 but the 2 rows’ colors showed properly but all row’s alternate colors not showing. for a better understanding please find the screenshot attached.

Using this code:

.bdp-post-masonry.bdp-effect-2 .bdp-post-grid:nth-child(2n+1) .bdp-post-grid-content { background: #232323;}
.bdp-post-masonry.bdp-effect-2 .bdp-post-grid:nth-child(2n+2) .bdp-post-grid-content { background: red;}

Screenshot URL:

https://ibb.co/19Hp1QQ
https://ibb.co/SK0Fq2f

Best

• This reply was modified 1 year, 9 months ago by shwetaarya.

Hi @shwetaarya

I have checked your blog page and applied the CSS via browser console. The provided CSS is working fine but due to masonry layout it shows like the screenshot.

In masonry layout, the structure will be arranged according to space so when you inspect the wrapper element its position is perfect but due to masonry layout it is arranged in space.

So 4n+1 or greater numbers will help you in this situation. I hope you can understand this.