Webflow site based on Web Bae’s Horizontal Scroll, loads zoomed out in Chrome on iPhone
Greetings! I've used @Web Bae 's inital "Flawless Horizontal Scrolling in Webflow" structure set up in Webflow to flesh out my site, but I'm running into some weirdness when it's viewed specificly in Google Chrome on the iPhone (perhaps other divices?).
The link to the Webflow site is: https://910zen-v3.webflow.io/
Webflow Read Only Link: https://preview.webflow.com/preview/910zen-v3?utm_medium=preview_link&utm_source=designer&utm_content=910zen-v3&preview=2a0bb0fda70d3a64b98d5d665d9ae006&workflow=preview
I'm attaching 2 screenshots. The zoomed out is how it looks through Chrome, the other version is how it loads in Safari (correctly)
Any ideas would be great!
910ZEN - WE MAKE GREAT BRANDS BETTER
910ZEN is an award winning, full service graphic design and web development studio with over 25 years experience. Big company or small, we have you covered
1 Reply
Hey @910ZEN !
in my example, slides have width set to 100vw, which ensures they take up the whole screen.
in your example, slides have width: auto.
flex box is collapsing your slides and trying to fit them all in one screen.
You can try setting an explicit width on your slides (i.e. 100vw) or try setting the flex-child property to "don't shrink or grow"
