[Resolved] Different Header images for mobile devices

[Tully]

Here is the CSS.

.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 between header and menu on tablet*/

.mobile-image {
     display: none;
}

@media (max-width: 500px) {
    .desktop-image {
        display: none;
    }
    .mobile-image {
        display: block;
    }
} /* display alternative header image on mobile.  Also see gp hooks for url to alternative images */

[Leo]

Are you actually wanting specific breakpoints?

If not it’s much better to use the classes in the suggested link: https://docs.generatepress.com/article/responsive-display/#using-our-hide-on-classes

If not I’ll need to see your site again. Feel free to start your own topic so you can use the private URL field.

[Tully]

The classes sound interesting Leo, and I am happy to change to using them apart from one question. Does hiding things cause trouble with SEO? For example, there is something similar when using SECTIONS to hide a section, but I thought that google might penalise hidden content? I am probably wrong so happy to give the classes a go if that isn’t the case.

[Leo]

Those classes are using CSS too as your method above. It’s just built in and using the default breakpoint.

[Tully]

Tried that Leo but it hasn’t fixed anything. Still nothing showing on Mobile. And it also brought the space back between the desktop header and the nav bar (see earlier in this topic). Regards, Tully

[Leo]

Can you open a new topic please as this is dragging on for quite awhile and this isn’t your topic?

Then you can use the the private URL field I don’t have to go look for your site everytime.

It would really help me out. (It would be great if you can also disable right click when we are solving the problem too.)

Thanks!

[Tully]

No worries, will do.

[Rob]

Just tryng to work this out

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>////

I have my header in a hook but where to I place this code?

[Rob]

forgot to press notify

[David]

Hi there,

this is a really old topic – can you raise a new topic, share a link to the site so we can see what you have so far and we can advise.

[Rob]

will do

[David]

Thx!

[Author]

Posts