Staff post format

[phil2]

phil2

November 8, 2020 at 11:37 pm

Hi,

On this site, I am using a post grid/carousel to display 2 staff posts in a single column. I have used css to reduce the image to a circular shape 260px diameter.

html.js.js-running body.page-template.page-template-page-fullwidth.page-template-page-fullwidth-php.page.page-id-55.logged-in.admin-bar.wp-embed-responsive.kt-showsub-indicator.notsticky.virtue-skin-default.wide.about-us.customize-support div#wrapper.container div.wrap.clearfix.contentclass.hfeed div#content.container.container-fullwidth div.row div#ktmain.main.col-md-12 div.entry-content div.wp-block-kadence-rowlayout.alignfull div#kt-layout-id_7b62d6-9a.kt-row-layout-inner.kt-layout-id_7b62d6-9a div.kt-row-column-wrap.kt-has-1-columns.kt-gutter-default.kt-v-gutter-default.kt-row-valign-top.kt-row-layout-equal.kt-tab-layout-inherit.kt-m-colapse-left-to-right.kt-mobile-layout-row div.wp-block-kadence-column.inner-column-1.kadence-column_4ac418-1a div.kt-inside-inner-col div.wp-block-kadence-postgrid.kt-blocks-post-loop-block.alignnone.kt-post-loop_1fc8e4-79.kt-post-grid-layout-grid div.kt-post-grid-wrap.kt-post-grid-layout-grid-wrap article.kt-blocks-post-grid-item div.kt-blocks-post-grid-item-inner-wrap.kt-feat-image-align-left.kt-feat-image-mobile-align-top div.kadence-post-image div.kadence-post-image-intrisic.kt-image-ratio-100 div.kadence-post-image-inner-intrisic a img.attachment-large.size-large.wp-post-image {
max-height: 260px; max-width: 260px; border-radius: 50%; object-fit: cover; object-position: 50% 0;
}

When the screenwidth gets below 768px, the gap between the image and the excerpt is too big and the image is left-aligned:

Please could you help with better css to format the picture so that we get this sort of display:

Many thanks,
Phil.