Support » Theme: Mission News » H1title on top of featured image

  • Hi,

    With reference to the title we were able to add image below the headlines in post, but we want featured images in the posts in home page to appear after the heading, as of now in the homepage image comes first and then the headlines. Please help

    The page I need help with: [log in to see the link]

Viewing 13 replies - 1 through 13 (of 13 total)
  • Theme Author Ben Sibley

    (@bensibley)

    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.

    theseafarerin

    (@theseafarerin)

    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.

    Theme Author Ben Sibley

    (@bensibley)

    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.

    Theme Author Ben Sibley

    (@bensibley)

    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/

    Theme Author Ben Sibley

    (@bensibley)

    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.

    Theme Author Ben Sibley

    (@bensibley)

    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.

    Theme Author Ben Sibley

    (@bensibley)

    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;
    }
Viewing 13 replies - 1 through 13 (of 13 total)
  • You must be logged in to reply to this topic.