Mobile header problem

[Karel]

Hello guys,

I’ve added this code and write “parallax” into elements classes

.parallax {
background-position: center bottom !important;
background-attachment: fixed;
}

In a desktop version, it is working perfectly, the problem is with a mobile version because an image is ” pushed out ” when I add text.

Is there any solution how to make the header image static on the mobile version?

[Leo]

Hi there,

Not quite sure if I understand.

What do you mean that it’s pushed out?

Sometimes it’s much easier to have a specific background image for mobile:

@media (max-width: 768px) {
    .home .page-hero {
        background-image: linear-gradient(0deg, rgba(0,0,0,0.12),rgba(0,0,0,0.12)), url(https://MOBILE-BACKGROUND-IMAGE-HERE);
    }
}

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/

[Karel]

By “pushed out” I’ve meant that without any content a header image is okey, but when I publish anything the image is moving.

As you can see here:

View post on imgur.com

[Leo]

Just checked on my phone and don’t think I’m seeing what you are seeing:
https://www.screencast.com/t/cseicZ5cJkHj

Have you tried clear and disable the caching plugin?
https://www.screencast.com/t/cPh1dY1vcmm

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/

[Karel]

Yes I did, I added even more content now, and the header image has moved again.

I would like to have it as a static image.

without that code above it is looking like I want.

View post on imgur.com

[Leo]

Sorry I’m a little confused.

So you want your original code only apply to desktop?

If so you can wrap it in the media query:
https://docs.generatepress.com/article/responsive-display/

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/

[Karel]

Yes, but I cannot find the way how to do it.

[Leo]

Find a way to do what?

If you want to use a fixed background image, shouldn’t the parallax be turned off?

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/

[Karel]

No, I did not find a way.

I tried to use this code:

@media (max-width:768px) {
.fake-para {
background-position: center top !important;
background-size: contain;
}}

and then played with padding for a mobile version, but a problem was that the image wasn’t always same sized. It didn’t look good.

If you want to use a fixed background image, shouldn’t the parallax be turned off?

Parallax feature is turned OFF in elements.

[Leo]

Sorry I’m really confused about what the problem is.

This is what I see on mobile and looks like everything is executed correctly as per your code:
https://www.screencast.com/t/xfhrLl5YdW

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/

[Karel]

I think I have just solved the problem now, it was kinda confusing because as we were writing I was still trying to play with code …

thank you anyway 🙂

[Leo]

No problem 🙂

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/

[Author]

Posts