[Resolved] Different Header images for mobile devices

[Guido]

Hello,

I would like to change the header image, when the screen is smaller than 890px, but I have no idea how I can do that.

Example

With a screen size of about 890px this to display

http://rs-massivholzkueche.de/wp-content/uploads/2016/02/custom2.jpg

With a screen size of less than 890px this to display

http://rs-massivholzkueche.de/wp-content/uploads/2016/02/custom.jpg

Unfortunately I can not find the code snippet for the style.css

media only screen and (max-width: 890px) {
      ????

I use GP Premium and look forward to useful tips.

Thank you
Guido

[Tom]

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

[Guido]

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

[Tom]

This CSS should do it:

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

[Guido]

Hi Tom,

I thank you for your support.
Guido

[Tom]

You’re welcome 🙂

[Tully]

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

[Leo]

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

[Tully]

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

[Leo]

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

Can you link me to the site?

[Tully]

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.

[Leo]

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!

[Tully]

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

[Leo]

Try removing your logo in Customizer > Site Identity

[Tully]

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?

[Author]

Posts