H1title on top of featured image

Thanks for using Mission News!

Try adding this CSS to reorder the post elements on the homepage:

.blog .entry article {
	display: table;
}
.blog .entry article .post-header {
	display: table-header-group;
}
.blog .entry article .featured-image {
	display: table-row-group;
}
.blog .entry article .post-content {
	display: table-footer-group;
}

Please copy & paste the code above into the “Additional CSS” section in the Customizer (Appearance > Customize), and it will take effect right away.

Hi,

The Custom CSS did work for the blog. Thank You very Much.

We have an another query, we want to hide post from the main section of homepage , but we want the post to to appear in the left side bar widget. Is there a way to achieve this?

Thanks in Advance.

You’re welcome ??

This next request isn’t possible, but you can do the opposite: you can hide a post in the left sidebar that already displays in the center column using this option in the Recent Posts Extended widget: https://screenshot.competethemes.com/mXum4d67

Hi, how did you figure out how to put the featured images below the header in posts?

Never mind, I figured it out.

Wait, no the CSS I used based off the last example was messing up my images at the bottom of the article.

Please, I still need help with this.

Try this CSS to put the heading before the Featured Image on the post pages:

.single .entry article {
  display: flex;
  flex-direction: column;
}
.single .entry .post-header {
  order: 1;
  margin-top: 0;
}
.single .entry .featured-image {
  order: 2;
}
.single .entry .post-content {
  order: 3;
}
.single .entry .post-meta {
  order: 4;
}
.single .entry .more-from-category {
  order: 5;
}

Hi,

We have an another query. Can we set the featured image and content side by side in the homepage?

https://theseafarer.in/

Yes, there are a few built-in layouts that do this. Inside the Customizer, open the Layouts > Post Preview section and you’ll find the layout options there.

Hi,

I did check for the options, but I didnt find one which will make content and images side by side.

My apologies, I was thinking the excerpt was next to the Featured Images in the “Rows with excerpts” layout. The problem with placing the excerpt next to the image is that the space isn’t going to balance well.

You can try out this code to create this layout and see how it looks on your site:

.layout-simple.blog .featured-image {
	width: 50%;
	float: left;
}
.layout-simple.blog .post-header, .layout-simple.blog .post-content  {
	width: 50%;
	float: right;
	clear: right;
}
.layout-simple.blog article:after {
	content: ".";
  display: block;
  clear: both;
  visibility: hidden;
  line-height: 0;
  height: 0;
}

Hi, thank you it did work, but the images and content stick to each other without any space.The contents which don’t have images are left blank.

Okay try this instead:

.layout-simple.blog .has-post-thumbnail .featured-image {
  width: calc(50% - 24px);
  float: left;
  margin-right: 24px;
}
.layout-simple.blog .has-post-thumbnail .post-header, 
.layout-simple.blog .has-post-thumbnail .post-content  {
  width: 50%;
  float: right;
  clear: right;
}
.layout-simple.blog article:after {
  content: ".";
  display: block;
  clear: both;
  visibility: hidden;
  line-height: 0;
  height: 0;
}