- This topic has 18 replies, 2 voices, and was last updated 4 years, 11 months ago by
.
-
Posts
-
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.Customer Support
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 homepageI 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/
- You must be logged in to reply to this topic.