[Resolved] horizontal scroll on mobile

[t29k75]

Hi,
I rebuilt my site https://surf-atlantic.com/ with GPP+GBPro.
I am checking & testing it page by page, starting with home page.
On mobile, there is a horizontal scroll there, as well as in “off canvas panel” (but only on home page). How can I get rid of it?
…and I need an advise regarding hero background image: I am using Advanced Backgrounds: image is 129 KB, 1920 by 1200 pixel. What is a best practise for use for mobile? Add new image with different pixels/less KB? or to use same same/original image but instead of image size: full, use let say: medium large? or I got it all wrong:) (see attached image, please).
thanks,
Tibor
https://ibb.co/KxLMRsN

[David]

Hi there,

the image you have beside the column titled: COMFORTABLE PRIVATE GARDEN has the Wide Width option ( in the Block Toolbar ) selected, disable that ( by clicking it again ) to stop the overflow.

Your understanding of the Advanced Images are correct. Options:

1. If the Image fits correctly on Desktop and Mobile then simply change the image size to medium-large
2. If the image doesn’t fit so well on Mobile then it would make more sense to upload an alternative image … note that mobile sizes cover up to 768px wide devices.

[t29k75]

Hi David,
wow, that was super fast answer!

I just did what you suggested (Wide Width) plus I had to set left & right negative margin to 0, which I have from tablet spacing.

Not sure if same problem is on tablet. I have negative margin -100px left (1st img), -100px right (2nd img), just because I like how it looks:) (see attached). If there is a horizontal scroll issue on tablet as well, what do you suggest to keep that “design” on tablet?
thanks,
T

https://ibb.co/B6whwBg

[David]

Nope – not seeing any horizontal scroll on tablet – left and right neg margins only become an issue if you’re pulling the element outside the viewport 🙂

Glad to be of help!

[t29k75]

Great!
thanks,
T

[David]

You’re welcome!

[Author]

Posts