Try this instead of whatever you have now:
.front-page-content-area .with-featured-image {
background-color: rgba(0, 0, 0, 0.6);
color: #ffffff;
}
.front-page-content-area .with-featured-image .entry-title {
color: #ffffff;
}
That’ll look like this:
https://cloudup.com/cutnWyBmcSY
https://cloudup.com/cA1JOxmha9w
How did you make your customizations so far? I don’t see a child theme or a custom CSS plugin, but I could be missing it.
Just a heads-up that if you’ve modified theme files directly, your changes will be overwritten whenever the theme is updated.
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.
Can we change the opacity and the color between two screen size ?
– white text on top of black overlaybox (for a big size screen)
and
– black text on white backgroung
You can learn more about using media queries that target certain screen sizes here:
https://en.support.wordpress.com/custom-design/custom-css-media-queries/
https://css-tricks.com/snippets/css/media-queries-for-standard-devices/
https://webdesignerwall.com/tutorials/responsive-design-with-css3-media-queries
