how to set post title on top of featured image in the harmonic theme?

• 

  kashy122 · Member · Nov 3, 2014 at 4:59 am

  • Copy link
  • Add topic to favorites

  I was wondering how or if there is a way to set the post title to show on top of the featured image on the home screen. i am using the Harmonic theme

  The blog I need help with is: (visible only to logged in users)

• 

  thesacredpath · Member · Nov 3, 2014 at 10:49 pm

  • Copy link

  Hi there, the following will move the title above the featured images in the main page, and also in archive type pages (category, tag and date archive). At 640px, the metadata to the left of the post content moves up above the featured image, and it is not in the same div as the content and title, so trying to put the title up there also under 640px would be messy, so I’ve limited this change to browser window/screen widths 641px and wider.

  @media screen and (min-width: 641px) {
  .blog .has-post-thumbnail .entry-main, .archive .has-post-thumbnail .entry-main {
      position: relative;
  }
  .blog .has-post-thumbnail .entry-header, .archive .has-post-thumbnail .entry-header {
      position: absolute;
      top: 0;
      border-bottom: none;
  }
  .blog .has-post-thumbnail .entry-thumbnail, .archive .has-post-thumbnail .entry-thumbnail {
      margin-top: 90px;
  }
  }

  Also, by using the .has-post-thumbnail CSS class, I have limited this change to only those posts that have featured images.

  If you have post titles that extend to two lines, the second line will overlay the top of the featured image. This is because we have to use postion: absolute; to move the title and that means it loses its relationships to the other post content elements and floats independently, so the image will not automatically move down if the title goes to more than one line.

  Give it a try and see what you think. Make sure and narrow down your browser window and also view it on a tablet and/or phone so you can see how things work and look.

• 

  kashy122 · Member · Nov 4, 2014 at 3:01 am

  • Copy link

  thank you so much! it worked out perfectly

• 

  thesacredpath · Member · Nov 4, 2014 at 3:07 am

  • Copy link

  You are welcome.