Blog Photos in theme: Impact

[Laure5]

 

Good day,

Is there a quick way to resize or my blog photos to the same size? I have tried everything I can think of and they are all different sizes still.

[Liquid_xPert_SJ]

@Laure5 

can you please share the store url?

Thanks

[Laure5]

https://botanicumsa.co.za/blogs/botanicums-blog-posts 

[Liquid_xPert_SJ · Accepted solution]

@Laure5 

please place below code into  your theme files,

Online Store > Edit Code > Assets > theme.css file and place at the very bottom OR

.blog-post-card__figure img {
	object-fit: cover;
	width: auto;
	height: 300px;
}

 Online Store > Edit Code > Layout > theme.liquid file before </head> tag

<style>
.blog-post-card__figure img {
	object-fit: cover;
	width: auto;
	height: 300px;
}
</style>

Results:

[Laure5]

My main post was affected now too and its picture is too small now. How do I fix this?

[Liquid_xPert_SJ]

you just removed it? please show it again i will provide the code for that too.

[Laure5]

@Liquid_xPert_SJ , I have removed the main post. All good. Thanks for the help.

[Liquid_xPert_SJ]

update your code with this

.blog-post-card__figure img {
	object-fit: cover;
	width: 100%;
	height: 300px;
}

[Devinlabs]

Hi , 

.blog-photo {
    width: 300px; /* Set your desired width */
    height: 200px; /* Set your desired height */
    object-fit: cover; /* This property ensures the image covers the defined dimensions */
}

apply the blog-photo class to all your blog photos: 
try this and let me know if you still need any help. 

[Laure5]

Hi @Devinlabs, you will have to tell me where I need to apply that. 

[Devinlabs]

You can put that into assets/theme.css