[Support request] Fix Page Header for Mobile

[Manuel]

Hello

Currently on my website I have been configuring headers for each of my pages. I would like to keep a different background image for each header.
While I have been able to accomplish the task, I am facing an issue in which the mobile version shows a cropped image, which looks quite uneasy.
I would like to either be able to resize and reposition the header image for mobile, or removing it completely instead for mobile only.

[Leo]

Hi there,

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

Let me know 🙂

[Manuel]

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.

[Leo]

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 🙂

[Manuel]

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?

[Leo]

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

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

[Manuel]

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?

[Leo]

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.

[Manuel]

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

[Leo]

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?

[Manuel]

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

[Leo]

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%;
    }
}

[Manuel]

Hello

Now the gap is back

[Leo]

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

[Manuel]

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

[Author]

Posts