Blog featured image adjustment in Dawn Theme

[cdgerard]

Hello,

On my home page in the BLOGS POSTS Section, the featured image is cropped (because it is square). How can I adjust this so that the square image can be shown properly?

Thanks!

[Sonya_2025]

Hey @cdgerard 

Pls follow below steps:

1. Open your theme editor

2.Find your default blog theme template

3.Choose the section of blog

4.Copy the CSS code to your custom css input textbox on the right side.

.rte img {
  max-width: 100%;
  object-fit: contain;
}

like below:

[cdgerard]

Hello Sonya_2025,

Thanks for this but it did not solve my issue.

I am referring to the home page, in the Blog Posts Section. The square image I'm using is cropped.

How can this be adjusted?

[Sonya_2025]

Hi @cdgerard 

It depends which image section your are using.  Can you put the image that cropped on the home page?

I think it displays well.

[cdgerard]

I'm using the blog post section in DAWN theme. This screenshot may help:

[cdgerard]

Ah you are looking at the live site which is DEBUT theme.

I am referring to a development site on DAWN theme, here is a link:

https://fd7bkfc0bwu3qj5l-61358440707.shopifypreview.com

[Sonya_2025]

Choose the whole image section,  And copy the CSS code to your custom css input textbox

.card__media .media img{
 object-fit: contain;
}

 And it will be display like this. Hope this helps.

[cdgerard]

Thank you yes it is now showing better  - but how can the grey background be changed to white?

[Sonya_2025 · Accepted solution]

Yes, copy the below css code and replace the old one into same input textbox 

.card__media .media img{
 object-fit: contain;
}

.media {
  background-color: white;
}

[cdgerard]

It works. Thanks so much for your help!

[Dan-From-Ryviu]

Hi @cdgerard 

You can change settings of blog to make the image display as Adapt to image from Online Store > Themes > Customize > Blogs > Default blog 

Best Regards,
Dan from Ryviu