Hi, I need help! I’m trying to create a horizontal scroll with one long image. I’ve watching plenty of tutorial videos and they seem to only work for groups of images and not just one.
Here is my site. It is in the “Skills” section. Thank you!
Section, Camera, Frame, Item are not set wide enough to accept Image 62
Try setting all to the fixed width of the image.
I set Section-skills to 19500px and the rest to 19000px. and a VERY wide image shows.
Is that image REALLY 19 thousand px wide?
Thank you! I have reduced the image size width to 8192px wide. However by following your steps I am still experiencing the same issues. When it scrolls it’s now getting off track and ends the scroll too soon.
That’s what I see
That ending black bar is because I left the Section width set to 19500px and the rest of the containing divs/boxes (they are all just versions of divs) set to 19000px
Here’s a trouble shooting suggestion.
Copy that section to a new PAGE so it’s isolated from all other code and figure out the issue there.
When I design with WF I create a ‘testing’ page for such issues then delete it before the release candidate
I think it has to do with the sizes I have set in those fields. I’ve been using this as a guide Horizontal scrolling - Webflow University Documentation
…but this is for groups of images. So trying to figure out what to put in the sizes for Section, Camera, Frame, Item is a very hard one to figure out. I have all of it basically set to 100 VW, 100 VH. And I’m sure the interaction is not set right either.
Width to the width of your image in PIXELS
Height to Auto
All the rest of the size options to 0
Ok so see here what happens when I do that…
Looks ok here (iMac & Safari) at all breakpoints.
What are you seeing that you don’t like?
I recorded a video but Webflow won’t allow me to send it. So it scrolls but the problem is that it doesn’t scroll all the way through and the page moves all over the page on mobile.
Yep! The workaround to posting a video here is to host it someplace then post the link here.
I just maintain a cheap domain for just sort of thing. > somedomain.xxx/example.mov < for example
You seem determined so I have faith you will solve this issue.
Gonna be a nice site when finished.
Well I certainly do appreciate you helping me! Thank you so much. Hopefully I will get it figured out!
I did it - horizontal scrolling for one panoramic image! I create a div (containter) for image container with the following settings:
where height and width are the actual dimensions of the full long image, proportionally converted to rem / vh, overflow is set to scroll, Fit is set to Fill. The maximum height and width are set to None, the minimum W and H to 0.
Display to block
For Image:
in Setting tab I set W and H to auto
in Style tab I set W and H to auto, Min W and Min H to 0, Max W to None and MaxH to 100%
Fit to Fill
Display to block
I hope it helps you. My scrolling work!