[Resolved] How to change x position of Page Hero on mobile

[Alexandra]

Hey guys,
I’m using a Header Element to have a fullscreen Page Hero created out of the featured image for my posts.
See example here: https://alex.bandiwork.dev/2020/10/postare-test.html

I’ve set the Background position to center center and I have an overlay as well.
I’m trying to change the x position of the featured image for the mobile version so that I could have this section selected for mobile instead of center center: https://prnt.sc/vfvaxx

I’ve tried some CSS but it was also moving my overlay, so I removed it.
Is there a way you can help me achieve this, please?
Thank you so much!

[David]

Hi there,

I would try this :

1. Install the Simple CSS plugin:

https://wordpress.org/plugins/simple-css/

This will provide a CSS meta box in the post editor, so you can apply CSS specifically to that post.

2. Add this CSS:

@media (max-width: 768px) {
    .page-hero {
        background-position: 10% 50%;
    }
}

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

[Alexandra]

Oh, wow, David! That is awesome!
That is exactly what I wanted & more 🙂
Thank you so much!

[David]

Glad to be of help 🙂

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

[Author]

Posts