Blog thumbnails size css

franklin
asked 7 years ago

Hello all,
As default the theme I am using for my website changes the featured blog post images to different sizes. I am trying to get all the featured blog images the same size so they fit side by side on desktop, mobile looks good already! is there maybe some css code I could add to fix this?
You could see an example what I am trying to reach on the photo bellow.
It would mean the world if someone could help me with this!
Blog: http://www.spicytulips.com/blog
Thanks!
Franklin

1 Answers

DominicStaff
answered 7 years ago

You can add the following code to the style.css file:

body.blog:not(.woocommerce) .blog_layout_2 .bg-image-wrapper .bg-image {
 width: 350px;
 height: 350px;
 object-fit: cover;
}
@media only screen and (min-width: 64em) {
body.blog:not(.woocommerce) .blog_layout_2 .blog_posts .blog_post,body.archive:not(.woocommerce) .blog_layout_2 .blog_posts .blog_post {
 width: calc(33.233% - 70px) !important;
}
}
 body.blog:not(.woocommerce) .blog_layout_2 .bg-image-wrapper, body.archive:not(.woocommerce) .blog_layout_2 .bg-image-wrapper {
 height: 305px !important;
}

franklin
replied 7 years ago

Hi Dominic,

Thank you soooo much, you’re an absolute legend!!! Just one more question , if I want to make the featured image size larger what do I need to change in the code above?

Thanks again!

Franklin

Dominic Staff
replied 7 years ago

You can change here:
<pre>body.blog:not(.woocommerce) .blog_layout_2 .bg-image-wrapper .bg-image {
width: 350px;
height: 350px;
object-fit: cover;
}
body.blog:not(.woocommerce) .blog_layout_2 .bg-image-wrapper, body.archive:not(.woocommerce) .blog_layout_2 .bg-image-wrapper {
height: 305px !important;
}</pre>

franklin
replied 7 years ago

Hi Dominic,

Sorry for the late respond, but I was gone for a few days. But I’ve just tried to change the image sizes but the only thing that changed was that the images zoomed in. So not the actual frame became bigger. I’m really aiming to get two large images next to each other just like the image above.

Thanks!

Cheers,

Franklin

Dominic Staff
replied 7 years ago

I have checked your site and see that this is some issue with the CSS. If you want to fix this issue, you can add the following code to the style.css file:
body.blog:not(.woocommerce) .blog_layout_2 .blog_posts .blog_post:nth-child(4n+3) {
clear: left;
}

franklin
replied 7 years ago

Hi Dominic,

Once again, thanks for the support! I’ve tried everything you told me, but for some reason it does not work for me… I guess it has to do something with the CSS indeed.

Thanks for you help!

Cheers,

Franklin

Dominic Staff
replied 7 years ago

My pleasure, If you still facing this issue or have any issue, question please let me know, I will help you resolve it.