Featured Content Slider

  • I want to remove the text box and all content over the featured slider. I also want to remove the slight grey darkening over the featured slider images so they appear as uploaded. What custom CSS do I use for this?

    Thank you for being so helpful as I build out this site!

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

  • Hi,

    “I want to remove the text box and all content over the featured slider.”

    – Please use this custom CSS to remove a caption box:

    
    .featured-content .inner-hentry {
      visibility: hidden;
    }
    

    This please use the following custom CSS to set a height for the Featured Content section (since the content is no longer visible):

    
    .featured-content .hentry {
     height: 400px;
    }
    

    The background image in the Featured Content section uses a cover functionality, meaning the browser automatically scales the image as large as possible and maintains image aspect ratio so the image does not get squished.

    The image covers the entire width and height of the container. When the image and container have different dimensions, the image is clipped either at the top and bottom edges, or the left and right edges.

    It’s possible to disable a cover functionality in smaller screens but it will cause some styling issues such as leaving some space either vertically or horizontally, or making your image to look squashed:

    
    .featured-content .th-featured-image {
      object-fit: fill;
    }
    

    “I also want to remove the slight grey darkening over the featured slider images so they appear as uploaded. “
    – Please use this custom CSS to remove an overlay:

    
    .featured-content .th-featured-image {
      opacity: 1;
    }
    

    Let me know if you have any additional questions.

    Thank you,
    Taras

  • The topic ‘Featured Content Slider’ is closed to new replies.