[Theme: EvoLve] Featured Image Size

Hey there Remech,

How are you doing today?

You should be able to achieve that with some custom CSS. Evolve has its own custom CSS tab which is located in Appearance -> Theme Options -> Custom CSS so you can try adding the following there:

.blog img.attachment-post-thumbnail.wp-post-image.img-responsive, .blog .entry-content .thumbnail-post .mask, .blog .entry-content .thumbnail-post div.icon, .blog span.thumbnail-post {
  max-width: 300px;
}

This should reduce your featured image on blog page to 300px in width, this should be the result https://screencast.com/t/bXH7PXhsDy.

If the code doesn’t work please keep it added and let me know so I can take a look ??

Cheers,
Bojan

God bless you, thats exactly what I was looking for!

Is there, by any chance, an option to reposition the featured image next to the title of my blog post?

Best regards

Remech

Hey again Remech,

I guess we could try re positioning the title by using position absolute and moving it to the right of the image. I’ve also added this into media query so we don’t mess up how posts look on smaller resolutions.

Please try adding the following:

@media screen and (min-width: 1220px) {
.home .hentry {
  position: relative;
}

h1.entry-title {
  position: absolute;
  right: 40px;
  max-width: 50%;
}
}

This should be the result https://screencast.com/t/8TfLClDlT0Pc.

Hope this helps ??

Cheers,
Bojan

Thanks a lot Bojan. However if I know click on the blog entry itself, the
title is missplaced:

https://www.remech.koeln/remech-auf-dem-tag-der-offenen-tuer/

Is there any way to reposition the title of my blog, but only when the blog post is opened?

Hey again Remech,

Sorry about that one, that was my bad for not using the correct selector so the code is applied to that class on all pages. Please try replacing the code with this one:

@media screen and (min-width: 1220px) {
.home .hentry {
  position: relative;
}

.home h1.entry-title {
  position: absolute;
  right: 40px;
  max-width: 50%;
}
}

This should do the trick ??

Cheers,
Bojan

Got that. I used the code and adjusted the featured-image width to 150px and the max width to 70%, because there is more room.

You can see the result on remech.koeln as usual, but there is a small problem with blog post headers which have more than one row (scroll down and you will see what i mean).

This is because i made the featured image smaller, but I thought you might know a way to place these headers a bit higher, depending on how many rows or characters they have.

I doubt thats possible though ^^

Thanks for everything, you were a great help to me.

Hey again Remech,

There is no way we can do that with CSS. What we could do is increase width of the title element for a bit more and remove top margin from it to move it slightly to the top, to do that replace the above code with this one:

@media screen and (min-width: 1220px) {
.home .hentry {
  position: relative;
}.

.home h1.entry-title {
  position: absolute;
  right: 40px;
  max-width: 73%;
  margin-top: 0;
}
}

This should be the result https://screencast.com/t/pSuM8JuwJ.

Hope this helps ??

Cheers,
Bojan