Aadhya

Hi @indigojones66

Thanks for your response, I can see the CSS class in sidebar layout but can not see the style on page. Kindly make sure you have added CSS correctly.

You can try below CSS for proper spacing.

.my-css .bdpp-post-title a{
font-family: 'Open Sans' !important;
font-size: 16px !important;
padding: 0;
}
.my-css h2.bdpp-post-title{margin:0 !important; line-height: normal;}

Hi @indigojones66

Thanks for the screenshot.

Yes, We can apply the CSS to comon elements of different layouts with the help of custom CSS class. Please refer to the screenshot below,
https://prnt.sc/b1TvTSb6U_C2

Once you add your own CSS class e.g. my-css then we can apply the CSS on it.

.my-css .bdpp-post-title a{font-size: 20px;}

I can see that you have added direct CSS into the extra CSS class. You just have to add CSS class not style. Please refer to the screenshot below,
https://prnt.sc/rCTgY8n1AGAU

Kind Regards,

Hi @indigojones66

Your website is not opening. It shows SSL error. Can you please take a look at it?

Hi @indigojones66

Yes, As I said it will stretch the small size of images.

I think there is no need to import the new image or no need to change the WordPress thumbnail size.

As per first response, [bdp_post media_size="medium"] You can use the medium size image and apply the CSS. I think it will fix the image stretch issue and display all images in same height and width.

As I can see for this post https://www.bravehound.co.uk/scots-veteran-with-ptsd/ the image has big size available so you can use that size instead of changing the WordPress thumbnail size and re-importing it.

Just for knowledge, Regenerate Thumbnail plugin can help you to regenerate the media if you have changed in WordPress media size setting like you did for thumbnail. There is a button to regenerate all media after applying new size.

Kind regards,

Hi @indigojones66

Yes, I can but it will stretch your small images. Below is the custom CSS which you can use. You can add this in Plugin Setting > CSS tab.

I have applied this CSS to your particular layout. You can add your own CSS class as well and apply this.

.bdpp-layout-109658 .bdpp-post-img-bg{width: 100%; height: 200px;}
.bdpp-layout-109658 .bdpp-img{height: 100%; width: 100%; object-fit: cover; object-position: top center;}
.bdpp-layout-109658.bdpp-equal-height .bdpp-post-grid-content{height:100%}

Also to make the each box in equal height, kindly add the bdpp-equal-height CSS class in layout editor CSS classes.

I hope this will help you. Please let me know if there is anything.

Regards,

Hi @dan426

Thanks for your web page link. Yes, premium version will do. There is a templating functionality so we can modify the output (HTML) as we want by overriding its file from current theme.