Docs

[Eric]

Hey I’m trying to resize/center my featured image for all blog posts (via CSS), but I can’t seem to figure it out.

I tried a few combinations, one of which was this:

.single-post .entry-featured {
display: block;
width: 90%;
margin: 0 auto;
}

And it got me close, however my image was never perfectly aligned (see screenshot 2). In terms of size, I’d like to make the width the same as the column width of my text (see screenshot 1), which was achieved by manually inserting the image into my post via cornerstone.

So if you have any idea on how to do this, please let me know.

Also, just to be thorough, here’s the code that I added to my funtions.php file, which is what I used to drop the featured image below the blog post title:

function my_custom_footer_output() {
if (is_single($post)) : ?>
<script type=”text/javascript”>
jQuery( document ).ready(function($) {
$(“.post .entry-header”).insertBefore(“.post .entry-thumb”);
$(“.post .entry-header” ).addClass( “mvl” );
});
</script>
<?php endif; }
add_action( ‘wp_footer’, ‘my_custom_footer_output’, 30 ); ?>

Thanks in advance!

[Eric]

This reply has been marked as private.

[Friech]

Hi There,

Thanks for writing in! You can add this under Custom > CSS in the Customizer.

.single-post .x-main.left .hentry .entry-featured {
	padding-left: 6%;
	padding-right: 6%;
}

Hope it helps, Cheers!

[Eric]

Hey I tried that code but it didn’t help with the alignment. It’s still slightly off-centered as you can see in screenshot 1. Any other ideas?

[Rad]

Hi there,

It’s because of this CSS,

.entry-thumb{width:95%;}

You have your featured image at 90%, then another 95% on the thumbnail. Hence 95% of 90% makes it smaller and not centered. Please remove that CSS.

Thanks!

[Eric]

Worked perfectly! Thanks a lot

[Lely]

You’re welcome Eric!

Cheers!

[Author]

Posts