[Support request] Mobile header image not showing up

[Tully]

Hi Leo,

Just started this new topic as per your request. I have deactivated right click disable (sorry, forgot I had this on!).

My mobile header image is not showing up. I am using GP hooks and CSS, but have also tried the hide classes as you suggested with the same result (except that space has reappeared between the desktop header and the nav bar, which I also had CSS to remove which you helped me out with previously.) Thanks Leo,

Regards
Tully

[Leo]

Hi there,

It isn’t working because this CSS is added:

.mobile-image {
    display: none;
}

I would recommend modifying your HTML classes like this:

<div class="hide-on-mobile hide-on-tablet">
    DESKTOP IMAGE HERE
</div>
<div class="hide-on-desktop">
    MOBILE IMAGE HERE
</div>

Then you wouldn’t need CSS at all.

[Tully]

Hi Leo,

As before, I tried this again but same result. Still no header image on mobile, and now I have the gap between header and nav bar again?

[Leo]

You have a background image uploaded in Customizer > Background Images > Header.

And you also need to disable the mobile header so the normal one would show up.

[Tully]

I have removed the background image in customizer. What do you mean by “disable the mobile header” ?

[Leo]

This: https://docs.generatepress.com/article/mobile-header/

[Tully]

Okay thanks, fixed that. Now the correct image is showing up on mobile and desktop, but the mobile image is showing up on tablet even though I have “hide-on-tablet” in gp hooks. Also the white space between header and nav bar is back, despite the css you suggested a while back:

.desktop-image {
    line-height: 0;
} /* remove white space between header and menu */

.mobile-image {
    line-height: 0;
} /* remove white space between header and menu */

@media (max-width: 768px) {
    .inside-header>:not(:last-child) {
        margin-bottom: 0;
    }
} /* remove white space in tablet between header and menu */

Obviously now I am not using those classes, the CSS is ineffective. So how do I remove the white space when using hide-on-desktop etc?

[Leo]

This should remove the white space:

.site-header {
    line-height: 0;
}

Hmm the hide-on-tablet would hide everything between 769 to 1024px. Are you using landscape on tablet?

[Author]

Posts