[Support request] Overlay Over Hero Image on Mobile Only

Home Forums Support Overlay Over Hero Image on Mobile Only

  • This topic has 5 replies, 2 voices, and was last updated 4 months ago by Leo.
Viewing 6 posts - 1 through 6 (of 6 total)
  • Author
    Posts
  • #1511503
    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!

    #1511525
    Leo
    Staff
    Customer Support

    Hi there,

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

    #1511551
    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.

    #1511586
    Leo
    Staff
    Customer Support

    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;
        }
    }
    #1511596
    Dave

    Hi Leo,

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

    #1511638
    Leo
    Staff
    Customer Support

    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.

Viewing 6 posts - 1 through 6 (of 6 total)
  • You must be logged in to reply to this topic.