• Resolved devons

    (@devons)


    I’m using Astra Pro and created a Page Header for the home page only.

    I want to use a different background image that displays on mobile only. How do I do that?

Viewing 5 replies - 1 through 5 (of 5 total)
  • Hello @devons,

    Here is a CSS to change Page Header image for mobile devices.

    Paste the CSS in the Customizer >  Additional CSS

    
    /*  CSS to change Page Header image for mobile devices */
    
    @media (max-width:768px){
    .ast-title-bar-wrap {
        background-image: url(add image URL);
    }
    }

    Note- Please add the image URL.

    I hope the above CSS will work for you.

    Thread Starter devons

    (@devons)

    That works, but can I specify it for JUST the home page on a mobile device?

    I’m happy with the Page Header on all the other pages on a mobile (I’m using Page Header to set different headers), it’s only the Home Page, on mobile, that’s a problem.

    Hi @devons,

    You can use the CSS code provided by @avi1020p, thanks for that Avinash, on a specific page by targetting it. Please refer to this article for more on that.
    
    Kind regards,
    Herman 🙂

    Thread Starter devons

    (@devons)

    Perfect. Thank you!

    • This reply was modified 4 years, 3 months ago by devons.

    You’re most welcome, @devons!

    Do let us know if there’s anything else we can help you with.

    Have a nice day and stay safe!

    Kind regards,
    Herman 🙂

Viewing 5 replies - 1 through 5 (of 5 total)
  • The topic ‘Home Page Header on Mobile’ is closed to new replies.