Archived topic
horizontal scroll on mobile
5 replies · Started by t29k75 on February 23, 2021
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
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.
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
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!
Great!
thanks,
T
You're welcome!
