Featured Content Title

• 

  millcoding · Member · Jun 2, 2017 at 3:37 pm

  • Copy link
  • Add topic to favorites

  Hello,

  On the Homepage I have two images with a title displaying the featured content. In the desktop view, the title is hidden below the bottom of the browser window and requires a user to scroll to see the title. Is it possible to have the featured content title positioned to the top of the image rather than the bottom?

  I’m using the Wayfarer theme and the “featured” tag is being used to display the image and title.

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

• 

  otpidusprime · Member · Jun 3, 2017 at 8:21 am

  • Copy link

  Hello @millcoding
  Here are some slight adjustments you can make using CSS to make the titles appear at the bottom(without scrolling) no matter what the browser window size is:

  1. First change the height of the featured images area to be always 100% of the height of the browser window viewport(visible area):

  .block-grid {
      height: calc(100vh - 180px);
  }

  2. And then, change the height of the image links to 100% of the height of the browser window viewport(visible area):

  .block-grid-item-image {
      height: 100%;
  }

  3. Finally, adjust the images to always fill up the featured images area:

  .block-grid-item-image img {
      object-fit: cover;
      height: 100%;
  }

  Let us know if this helps. Thanks! 🙂

• 

  millcoding · Member · Jun 7, 2017 at 12:09 am

  • Copy link

  Hello,

  Thank you for the input. I attempted to add the CSS that was provided. Unfortunately this brings the footer into the image and displays the WordPress logo as well as any widgets I have. This also just leaves the featured content title in the middle of the image in the desktop view. (I kept the CSS in place for troubleshooting purposes).

  Do you have any further recommendations?

• 

  thesacredpath · Member · Jun 7, 2017 at 9:47 am

  • Copy link

  Hi, add the following to get the title on the images on your main page to be at the top.

  .wayfarer-featured-posts .block-grid-item-title {
  	bottom: initial;
  }