[Resolved] Different Header images for mobile devices

[Leo]

You can remove the white line with this:

.desktop-image {
    line-height: 0;
}

I’m not seeing the second half of the CSS being added. Can you clear the caching plugin?

[Tully]

Hi Leo,

That fixed the white space, thanks.

I have cleared the caching plugin (multiple times) but no difference?

[Leo]

Hmm weird. Can you try disabling the caching plugin first?

I can’t quite tell why the CSS is not getting loaded.

[Tom]

Can you try adding that CSS to the very top of your custom CSS?

[Tully]

I’ve moved CSS to the top, and also deactivated the cache plugin but still the same result.

[Tom]

Ah, you have this in your media query: max-width: 768x

It should be: max-width: 768px

[Tully]

Great thanks! That fixed it. So simple!

However still an issue with the white space – there is no white space between header and menu on desktop or on vertical mobile, but turn mobile on its side and there is white space? Or just resize desktop and there is no white space until as screen shrinks the white space appears, then as it shrinks further the white space disappears again?

Once again, thanks for the amazing support.

[Leo]

Try this CSS:

@media (max-width: 768px) {
    .inside-header>:not(:last-child) {
        margin-bottom: 0;
    }
}

[Tully]

Thanks Leo that’s got it sorted.

[Leo]

Glad we could help!

[Tully]

Hi there,

Everything has been working fine, but now for some reason my mobile header is no longer displaying? Site is http://www.workingsheepdogtraining.com.

Thanks.

[Leo]

Hi there,

I can see the mobile header: http://www.screencast.com/t/ve3aVtcYT3Y

Looks like there isn’t a mobile header logo uploaded.

Let me know if this helps 🙂

[Tully]

Hi Leo,

Not sure what you mean? I have different headers to display using CSS and GP Hooks. The hooks code is:

<div class="desktop-image">
    <img src="https://workingsheepdogtraining.com/wp-content/uploads/2018/02/Masterclass-Working-SheepdogTraining-Header-1920x480-b.jpg" alt="Working Sheepdog Training Masterclass videos header image" />
</div>
<div class="mobile-image">
    <img src="https://workingsheepdogtraining.com/wp-content/uploads/2018/02/Masterclass-Working-Sheepdog-Training-Mobile-Header-tall.jpg" alt="Working Sheepdog Training Masterclass videos header image" />
</div>

Regards,
Tully

[Tully]

I copied and pasted the gp hooks code into the last message, however it seems it just displayed the images? How can I copy that code in here for you to see without it just displaying the images? I’ll try something else:

[Leo]

You need to highlight the code and select “code” to make the actual code show up.

I’ve done it for you above.

Do you have CSS to go along with those images?

Might be easier to use the hide-on classes too: https://docs.generatepress.com/article/responsive-display/#using-our-hide-on-classes

[Author]

Posts