Different Header images for mobile devices

Hi Guido,

In GP Hooks, you would add your two images like this:

<div class="desktop-image">
    <img src="URL TO DESKTOP IMAGE" alt="" />
</div>
<div class="mobile-image">
    <img src="URL TO MOBILE IMAGE" alt="" />
</div>

Then you would add this CSS:

.mobile-image {
     display: none;
}

@media (max-width: 890px) {
    .desktop-image {
        display: none;
    }
    .mobile-image {
        display: block;
    }
}

Hi Tom,

great, it works. Thank you for your support.

Just one last question
How can I center the mobile-image?

Thank you for an answer.
Guido

This CSS should do it:

.mobile-image {
    text-align: center;
}

Hi Tom,

I thank you for your support.
Guido

You're welcome :)

Hi Tom,

Wanting to do the same thing, to make the header image larger in mobile. Never used hooks. What section of GP Hooks should I put the code in?

Thanks, Tully

Try this Before Header Content hook: http://demo.generatepress.com/hook-locations/

Hi Leo,

Thanks for that.

I added the code into hooks before header content, and added the css, but all I got was two header images one above the other?

Regards
Tully

Hmm the CSS should've hidden one or the other.

Can you link me to the site?

Site is https://workingsheepdogtraining.com

However I have disabled the gp hook and commented out the css at the moment due to it not working.

Can you test with this CSS and see if it works?

.mobile-image {
     display: none;
}

@media (max-width: 768px) {
    .desktop-image {
        display: none;
    }
    .mobile-image {
        display: block;
    }
}

If not I would also need to see the code in place to tell why it's not working. Thanks!

Hi Leo,

Have tried that but still same result. The code is active now with two headers showing if you could have a look fairly soon that would be great as obviously I don't want the webpage live looking as is at the moment! Thanks Leo

Try removing your logo in Customizer > Site Identity

Thanks Leo that has fixed the two header issue. However now there is a white line beneath the header image, between it and the menu. And the image isn't changing on mobile?