Solved

Blog featured image adjustment in Dawn Theme

cdgerard
Shopify Partner
43 2 3

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!

batman.png

Accepted Solution (1)
Sonya_2025
Shopify Partner
148 18 29

This is an 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;
}

 

Please let me know if it works by giving it a Like or marking it as a solution!
Feel free to reach out. EMAIL ME  
PAY ME

View solution in original post

Replies 10 (10)

Sonya_2025
Shopify Partner
148 18 29

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:

 

Sonya_2025_1-1714010225886.png

 

Please let me know if it works by giving it a Like or marking it as a solution!
Feel free to reach out. EMAIL ME  
PAY ME
cdgerard
Shopify Partner
43 2 3

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
Shopify Partner
148 18 29

Hi @cdgerard 

 

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

 

Sonya_2025_0-1714016570617.png

 

I think it displays well.

 

Please let me know if it works by giving it a Like or marking it as a solution!
Feel free to reach out. EMAIL ME  
PAY ME
cdgerard
Shopify Partner
43 2 3

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

 

Screenshot 2024-04-25 133936.png

cdgerard
Shopify Partner
43 2 3

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
Shopify Partner
148 18 29

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.

Sonya_2025_1-1714016954284.png

 

Please let me know if it works by giving it a Like or marking it as a solution!
Feel free to reach out. EMAIL ME  
PAY ME
cdgerard
Shopify Partner
43 2 3

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

 

Sonya_2025
Shopify Partner
148 18 29

This is an 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;
}

 

Please let me know if it works by giving it a Like or marking it as a solution!
Feel free to reach out. EMAIL ME  
PAY ME
cdgerard
Shopify Partner
43 2 3

It works. Thanks so much for your help!

 

Dan-From-Ryviu
Shopify Partner
7697 1496 1500

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 Screenshot 2024-04-25 at 09.57.43.png

Best Regards,
Dan from Ryviu

- Helpful? Like or Accept solution! or Buy me a coffee
- Ryviu - Product Reviews app, collect product reviews, import reviews from AliExpress, Amazon, Etsy, Shopee and Walmart and CSV.
- Lookfy app: Easy and fast to create Photo Gallery, Lookbook, Shop The Look
- Enjoy 1 month of Shopify for $1. Sign up now