On the blog, is it possible to move the featured image on the single blog page to the top of the page so it appears above the title and rest of content?

[core365]

Hi, on the blog, is it possible to move the featured image on the single blog page to the top of the page so it appears above the title and rest of content? I’ve tried, but I can’t figure it out! Hope you can help me out!

I’ll put the URL in a secure note as it’s on a temp link.

Thanks!

[jade]

Hi there,

The easy way to do that would be to add some custom CSS:

.single-post .entry-wrap {
    display: flex;
    flex-direction: column;
}

.single-post .entry-wrap header.entry-header {
    order: 2;
}

.single-post .entry-wrap .entry-featured {
    order: 1;
}

.single-post .entry-wrap .entry-content.content {
    order: 3;
}

Here are some reference links related to the suggestions above:

• CSS Introduction - https://www.w3schools.com/css/css_intro.asp
• How to get CSS Selectors using Chrome - https://stackoverflow.com/questions/4500572/how-can-i-get-the-css-selector-in-chrome
• CSS Flex Box - https://css-tricks.com/snippets/css/a-guide-to-flexbox/

Hope this helps.

[core365]

That’s fab, thanks! I appreciate the reference links too!

Just one more thing, I want to keep just the date under the title and get rid of the author and category title. I’ve tried to find the tag to do CSS myself, but it just comes up with ‘span’ when I select them!

Cheers

[Prasant]

Hello @core365,

Thanks for updating the thread.

Please add following CSS under X > Theme Options > CSS:

.p-meta span:nth-child(1), .p-meta span:nth-child(3) {
display: none !important;
}

.p-meta>span:after{display: none;}

Thanks.

[core365]

Excellent! Thank you so much!

[jade]

You’re most welcome.