Different "Featured Image Dark Filter" on Web & Mobile

Hi there, it would be helpful if you could provide screenshot of the mobile issue you’ve described so I can take a look, as I haven’t been able to replicate it.

Here’s a guide on how to make a screenshot:
https://en.support.wordpress.com/make-a-screenshot/

You can upload the screenshot – in a graphic format like JPG, PNG, or PDF – in your Media Library, and provide a link so I can see it, or upload it with a service like Imgur or Snaggy. Thanks!

Along with the screenshot, please let me know:

– what specific device you’re using (i.e. Nexus 7)
– what OS you’re using (i.e. Android 4.4.4 Kitkat)
– what browser you’re using (i.e. Chrome)

Hello & Thank You Kathryn!

Here’s a post with screencaps of both Web & Mobile with “dark filter” both on and off:
https://xuefaith.co.uk/boardwalk-theme/

Device: Intel Core i7 950, 3.07 GHz, 12 GB ram
OS: Windows 10, v1511
Browser: Firefox 42.0
Browser: Chrome 46.0.2490.86

Device: MotoG, 2015
OS: Android 5.1.1
Browser: Chrome 46.0.2490.76

Device: iPod Touch
OS: iOS 9.1
Browser: Safari

Thanks so much for these screenshots, very helpful. I’m going to pass them along to our developers so they can have a look. I suspect that the display in this screenshot may be unintentional:

https://xuefaith.co.uk/wp-content/uploads/2015/11/Boardwalk-Mobile-Dark-Off-225×400.png

We’ll keep you posted here.

Hi Xue Faith, our developer looked into this but unfortunately adding an option is a bit more complicated than we’d hoped, in part because Boardwalk has a child theme.

The good news is that you can accomplish what you’re after with some custom CSS! I tested this and I think it does what you’re looking for, if you’d like to give it a try. It puts a dark filter over the post thumbnail, and removes the extra-dark strip behind the post title, but only on smaller screens:

@media screen and (max-width: 768px) {

  .hentry.has-post-thumbnail .entry-link {
    background: #000 none repeat scroll 0 0;
    opacity: .25;
  }

  .hentry.has-post-thumbnail:hover .entry-link {
    background: #06973b;
    opacity: .6;
  }

  body:not(.filter-on) .hentry.has-post-thumbnail .entry-header {
    background: transparent;
  }

}

Let me know if this does the trick or if there’s anything you’d like to adjust.

I’m not sure whether you’re already using a custom CSS plugin, but an easy way to add custom CSS is to install the Jetpack plugin and activate the Custom CSS module. You’ll then add your custom CSS in the new stylesheet editor that’ll appear in your dashboard, under Appearance > Edit CSS.

As alternatives, you could either install a standalone custom CSS plugin, or create a child theme. Don’t edit the theme files directly, otherwise your changes will be overwritten every time the theme is updated to the latest version.

That’s perfect Kathryn!

It seems to accomplish exactly what I wanted:
Mobile – clean and simple
Web – bright and elegant

Thanks so much for this fix, and thank you again for a very cool, modern, simple, elegant theme!

You’re welcome – glad that does the trick. And glad you’re liking Boardwalk!