[Support request] Overlay Over Hero Image on Mobile Only

[Dave]

Hi Guys,

I’d like to add a black overlay over top of my hero image that only appears on mobile, not on the desktop version of my site.

Is there some CSS that I can use to do this?

For reference, here’s a post that shows what I’m doing now:

https://www.irreverentgent.com/j-crew-alternatives-for-men/

Thanks!

[Leo]

Hi there,

Are you looking to do that for all posts all just the post you’ve linked?

[Dave]

Good question. Ideally I’d like the ability to choose which posts to apply the effect to, if that’s possible. If not, then I would apply it to all posts.

[Leo]

Give this CSS a shot:

@media (max-width: 768px) {
    .page-hero {
        position: relative;
    }
    .page-hero::before {
        content: "";
        display: block;
        height: 100%;
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        background-color: rgba(10,10,10,0.39);
        z-index: -1;
    }
}

[Dave]

Hi Leo,

No luck, unfortunately – nothing happened when I added that code.

[Leo]

How did you add the code? I’m not seeing it being added.

Can you disable Autopimize and any caching plugins you might be using?

I’m seeing Cloudflare Super Page Cache activated in the source code.

[Author]

Posts