[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
  • #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:



    Customer Support

    Hi there,

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


    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.

    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;

    Hi Leo,

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

    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.