Resize featured image of the post

• 

  srpedal · Member · Feb 9, 2016 at 5:02 pm

  • Copy link
  • Add topic to favorites

  Hi, with my current theme I have the ability to add featured images to my posts. While this looks nice in my homepage, when you open the posts, the image takes half of the page.

  So, I was able to remove the featured image from within the post (but keeping it in the homepage). However, problem is that my posts are not centered in the page. Now it has only a blank space where the image used to be.

  Is there anyway to resize this space OR to make my post to be in the center of the screen using some sort of CSS ?

  Thanks

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

• 

  madeincosmos · Member · Feb 9, 2016 at 9:51 pm

  • Copy link

  Hi, the post header in your current theme is currently glued to the bottom of the screen. You can align it with the rest of post content by adding the following:

  .has-post-thumbnail.is-singular:not(.home):not(.single-format-image) .entry-header {
      bottom: auto;
  }

  Alternatively, you can try placing it at different positions on the page by manipulating its top property. The following will set the top of post header at 30% of screen height:

  .has-post-thumbnail.is-singular:not(.home):not(.single-format-image) .entry-header {
      bottom: auto;
      top: 30vh;
  }

  Unfortunately it is not possible to align the header precisely at the center of the screen, as we cannot know its exact height in advance.

• 

  thesacredpath · Member · Feb 9, 2016 at 9:55 pm

  • Copy link

  Hi, Dyad is somewhat complex. Add the following and see how this does for you.

  @media screen and (min-width: 961px) {
  .is-singular .entry-media {
      display: none;
      background-color: transparent !important;
      background-image: none !important;
  }
  .has-post-thumbnail.is-singular:not(.home):not(.single-format-image) .entry-header {
      width: 100%;
      position: inherit;
  }
  .is-singular:not(.home) .site-inner {
      width: 100% !important;
  }
  }

• 

  srpedal · Member · Feb 10, 2016 at 8:44 am

  • Copy link

  Hey @thesacredpath

  This actually worked exactly the way I needed. Thanks!

  The only thing is that the Post header/title now has a background color (gray). Any idea to fix that?

• 

  thesacredpath · Member · Feb 10, 2016 at 8:28 pm

  • Copy link

  This one was complex. Add the following to your custom CSS.

  .has-post-thumbnail.is-singular:not(.home):not(.single-format-image) .entry-header {
      background: transparent;
  }
  .has-post-thumbnail.is-singular:not(.home):not(.single-format-image) .entry-header, .has-post-thumbnail.is-singular:not(.home):not(.single-format-image) .entry-meta, .has-post-thumbnail.is-singular:not(.home):not(.single-format-image) .entry-header .entry-title, .has-post-thumbnail.is-singular:not(.home):not(.single-format-image) .entry-header h1, .has-post-thumbnail.is-singular:not(.home):not(.single-format-image) .entry-header a {
      color: #000 !important;
  }
  .is-singular .has-post-thumbnail .is-singular .entry-header .entry-meta .cat-links, .is-singular .has-post-thumbnail .entry-header .entry-meta .cat-links a {
      color: #fff !important;
  }

• 

  srpedal · Member · Feb 11, 2016 at 8:49 am

  • Copy link

  Now it works!! Thanks so much for the help! :-)

• 

  thesacredpath · Member · Feb 11, 2016 at 9:01 am

  • Copy link

  You are welcome.