[Resolved] Page Header parallax mobile

[roman.bobak]

Hi Tom & Leo,
one quick question.

When I use the Page header with “Content” and “Add Backgroung image” + “Parallax”, how can I disable the parallax effect on mobile devices?

Thank you very much.

Btw. GP is seriously good! 🙂

[Tom]

Hi there,

Glad you’re enjoying it! 🙂

Try this CSS:

@media (max-width: 768px) {
    .page-header-content {
        background-position: center center !important;
    }
}

[roman.bobak]

Thank you very much, working! 🙂

[Tom]

You’re very welcome 🙂

[Marcus]

Hi Tom & Team,

just wanted to let u know … i see jitter when i use the parallax effect in page header on my mobile ( iOS ) but only in Low Power mode! … so this has nothing to do with you in the first place.

But, here is my question: I wanted to disable parallax on the mobile and found this Post here. But your CSS doesn’t seem to work anymore. Has the selector changed ? I use the Posts Featured Image.

Cheers Marcus

[Tom]

Hi there,

Yes, the selector has likely changed as the Page Header module is now deprecated. If you can open a new topic with your website URL we can provide the updated CSS.

Thanks!

[Marcus]

Thank you!

The selector has changed to page-hero.

This CSS works for me:

@media (max-width: 768px) {
    .page-hero {
        background-position: center center !important;
    }
}

[Tom]

Glad you got it working 🙂

[Author]

Posts