White overlay on Featured content

• 

  isabellebittarapcuriumcom · Member · Nov 19, 2015 at 10:18 pm

  • Copy link
  • Add topic to favorites

  Hi!
  I would like to remove the white overlay on my featured content. I am currently using the Corporate theme: https://corporatethemedemo.wordpress.com/docs/page-templates/show-off-your-best-with-featured-content/

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

• 

  thesacredpath · Member · Nov 20, 2015 at 1:22 am

  • Copy link

  Hi there, add the following to your custom CSS.

  #featured-content article .article-liner {
      background-color: rgba(255, 255, 255, 0);
  }

• 

  isabellebittarapcuriumcom · Member · Nov 20, 2015 at 2:12 am

  • Copy link

  Thank you so much! That is exactly what I needed! Do you know if it is possible to reduce the size of the featured content and make it one row of 4 instead of 2 rows of 2?

• 

  thesacredpath · Member · Nov 20, 2015 at 4:39 am

  • Copy link

  Yes, on Corporate we can do that. The issue is that on narrower screens the images and such become too narrow. The following is a Media Query that limits the 4-column layout to 768px and wider screens. Below that width, things return two two columns, and then eventually to a single column.

  @media screen and (min-width: 768px) {
  	.featured-content-mosaic #featured-content article:first-child:nth-last-child(2), .featured-content-mosaic #featured-content article:first-child:nth-last-child(2) ~ article, .featured-content-mosaic #featured-content article:first-child:nth-last-child(4), .featured-content-mosaic #featured-content article:first-child:nth-last-child(4) ~ article, .featured-content-mosaic #featured-content article:first-child:nth-last-child(5), .featured-content-mosaic #featured-content article:first-child:nth-last-child(5) + article, .featured-content-mosaic #featured-content article:first-child:nth-last-child(7), .featured-content-mosaic #featured-content article:first-child:nth-last-child(7) + article, .featured-content-mosaic #featured-content article:first-child:nth-last-child(7) ~ article:nth-child(6), .featured-content-mosaic #featured-content article:first-child:nth-last-child(7) ~ article:nth-child(7), .featured-content-mosaic #featured-content article:first-child:nth-last-child(8), .featured-content-mosaic #featured-content article:first-child:nth-last-child(8) + article, .featured-content-mosaic #featured-content article:first-child:nth-last-child(10), .featured-content-mosaic #featured-content article:first-child:nth-last-child(10) + article, .featured-content-mosaic #featured-content article:first-child:nth-last-child(10) ~ article:nth-child(6), .featured-content-mosaic #featured-content article:first-child:nth-last-child(10) ~ article:nth-child(7), .featured-content-mosaic #featured-content article:first-child:nth-last-child(11), .featured-content-mosaic #featured-content article:first-child:nth-last-child(11) + article {
  		width: 25%;
  	}
  }

• 

  amosaics · Member · Nov 20, 2015 at 6:59 pm

  • Copy link

  I’m having the exact same problem with removing the white overlay. Where is this “Custom CSS” of which you speak, where I add the code to remove the overlay???

  I’m a beginner at this so need it all spelled out very carefully. :)

• 

  amosaics · Member · Nov 20, 2015 at 7:03 pm

  • Copy link

  PS Using the Sela theme . The overlay shows up on my Home page in front of the Featured Image.

  Custom Mosaics

• 

  thesacredpath · Member · Nov 20, 2015 at 10:35 pm

  • Copy link

  Hi @amosaics, since you are using a different theme, and since CSS is generally theme specific, can I ask you to create a new thread in the CSS Forum? Many thanks in advance.