Archived topic

Overlay Over Hero Image on Mobile Only

5 replies · Started by Dave on October 30, 2020

Viewing posts 1–6 of 6

October 30, 2020 at 11:21 am #1511503

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!

October 30, 2020 at 11:39 am #1511525

Hi there,

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

October 30, 2020 at 11:51 am #1511551

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.

October 30, 2020 at 12:24 pm #1511586

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;
    }
}

October 30, 2020 at 12:41 pm #1511596

Hi Leo,

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

October 30, 2020 at 1:54 pm #1511638

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.

This archived topic is closed to new replies.

Start building better websites today.