Streaming live at 10am (PST)

Image width limited to 2000px


#1

I was hoping to place a panorama image that is 8000px wide and wanting to scroll sideways on overflow. Webflow seems to limit the maximum width of any object to 2000px. Why?

I am wanting to create a div that is set to 100% of page width and 900px high.
Set the pano image to actual size (8000 x 900 px)
Set overflow width to scroll.

Webflow limits the image to a max width of 2000px so that is not possible.

I see a partial workaround if I set the pano mask to the 2000px limit and set my pano image to 400% width ( 2000px x 400% = 8000px), but with the max object 2000px limit imposed I don't see a solution for the mask to be 100% of page width and control the width of the scroll path because they would only work if the browser window is 2000px or the pano image undershoots or overshoots scroll.

I will post an example in a sec.

Any suggestions or workarounds?


#2

I cannot see any solution with the WF pixel limit that will allow you to build a simple side scrolling overflow element that works in a responsive container.

build:
https://webflow.com/design/pano?preview=37a9aa7d660ff020c912660e4ca80212

published:
http://pano.webflow.com/

if you set the width of the browser below 2000px wide it won't scroll the full width of the image on the fixed width mask and overruns the full width mask if wider than 2000.


#3

not sure if this will work.. but have you tried allowing overflow in a div ?


#4

The pano image is a background image loaded in a div with the width set to 400% (that is the only work around for the 2000px limit that I could find).

The mask is just a section (or could be a div) with overflow scroll.

Is that what you mean @Revolution ?

I corrected my note (above in bold). Setting width 8000 on the image has no effect.


#5

Hey @vlogic

One solution/cool thing that might also be a cool user experience would be to create a full-width/height slider. Split your panoramic image into 5 (or however many) slides/images and allow the user to navigate from one portion of the image at a time and adjust the transition time/effect to fit the feel you want. Example here: http://panoslider.webflow.com/

Plus this way you could easily add text and other elements, while also allowing it to be mobile friendly!

Just an idea! smile


#6

That is a great idea for mobile @Mat. It would be really easy to set the panos I have created to export as slices in Photoshop and they would fit together seamlessly. A slow transition does have a nice feel. Definately worth a shot. Thanks for the example and the suggestions!


#7