An earlier post covered how to show blog module featured images to the left of the post text in the Divi theme. Here's the equivalent CSS for doing the same thing on the standard category / archive / search pages:
/* Place category / archive / search images on left of text */
/* src: https://divibooster.com/show-archive-page-featured-images-on-left-of-post-extract/ */
@media only screen and (min-width: 981px) {
body.archive .et_pb_post img,
body.search .et_pb_post img {
height: 180px !important;
width: 335px;
float: left;
left: 0;
margin-right: 25px;
}
body.archive .et_pb_post,
body.search .et_pb_post {
clear: both;
min-height: 180px
}
/* Move text over when there is no thumbnail */
body.archive .et_pb_post:not(.has-post-thumbnail) {
margin-left: 360px;
}
}Related Post: Adding CSS to the Divi Theme
The final block of CSS that starts "/* Move text over…" re-positions the text even if there isn't an image available, so that the text lines up the same for every item. You may wish to delete this if you'd like to keep extracts with no image as full width.
Recently Fixed one of my clients issues thanks man
Hey, Dan. This works great, but is there a way to maintain the proper aspect ratio on the thumbnails of the featured images? I've made some adjustments to the height to accommodate a tall image on a new post, and now it's (obviously) stretching thumbnails for other posts on the page. ???
Hey Bill! You can use the object-fit CSS property for this, e.g.
body.archive .et_pb_post img, body.search .et_pb_post img { object-fit: cover !important; }The width / height you have specified defines a "bounding box" area for the image and normally the image is stretched / shrunk to fit this area exactly (equivalent to "object-fit: fill"). A value of "cover" instead preserves the aspect ratio of the image and generally results in the image being resized and cropped in one of its dimensions so that the result covers the bounding box without any distortion. Another value you could use is "contain" which ensures that the aspect ratio is maintained and the image shrunk to fully fit within the bounding box (which means the image may be smaller in one of its dimensions that the bounding box).
I hope that makes sense!
Hello Dan, that was exactly what I needed. Object fit solution solved my problem with streched featured image on Divi archive pages.
Thank you so much!!!
Great! I'm glad that helped, and thanks for letting me know!