Fix Page Header for Mobile

Hi there,

Any specific page(s) where I can see the issues so I can provide the best suggestions?

Let me know :)

yes, try this one:
https://www.motionamp.com/logo-animation/

I would like the image to be resized or repositioned so it shows the face of the woman.

Try this CSS:

@media (max-width: 768px) {
    body.page-id-117 .page-hero {
        background-position: 30%;
    }
}

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

Let me know :)

That worked, thanks.
However, now I have a small dent on the mobile version. I can scroll sideways even when the user should not be able to. Could you assist me with this?

Hmm I don't think that's causing by my CSS?

Might be the sticky reCAPTCHA thing at the bottom right corner?

I tried disabling the recaptcha and the gap is still there. Maybe it was not caused by the css since I disabled it and enabled it again.
Could you help me to get rid of the gap?

You can try this CSS but it's not the best fix:

body {
    overflow-x: hidden;
}

Usually this is caused by a certain element that has width wider than the container.

Does this error happen on a normal page consisting only GP's elements? ie no Elementor etc.

Hello

The css did not work.
Right now all the pages are built with Elementor. My main concern is that this happens on every page except the homepage

I just checked this page again and no longer see the issue:
https://www.motionamp.com/logo-animation/

Can you do a quick test by creating a new page without Elementor and see if the issue still exists?

I created a template from the page, and created a new page from scratch:
https://www.motionamp.com/elementor-535/

the gap issue is resolved, however now the image problem is back

The CSS I provided is targetting the that specific page.

To apply it to the new page, you can use this CSS:

@media (max-width: 768px) {
    body.page-id-535 .page-hero {
        background-position: 30%;
    }
}

Hello

Now the gap is back

Weird. Can you remove the CSS and let me have another look?

I removed it and the gap keeps showing.
https://www.motionamp.com/elementor-535/