Streaming live at 10am (PST)

iPhone 6s+ responsiveness broken


#1

http://www.financialedgeworkshop.com was built in webflow. It works correctly in the mobile preview and on android devices. On iOS devices in portrait mode, however, the layout is screwed up, with two boxes being jammed in next to each other and the entire page being zoomed out to make it all fit.


#2

It's quite simple to fix but we need your read-only link to show you how.

Do you mid sharing your site's read-only link?

1 - On your site's dashboard click the Share icon:

2 - Generate or Copy the link:

3 - Then edit your post here and paste it inside.


#3

https://preview.webflow.com/preview/get-motivated-responsive-homepage?preview=5308398ba7c3d7213a498fe5aab5fabc

Go to the Financial Freedom Seminar page.


#4

OK so there is a bug. But usually you can reproduce what you see on devie by adjusting the viewport for this devie in the designer, like this:

Now by working on the landscape breakpoint we can reproduce and fix the issue, and that will propagate to the portrait.

Look how:


#5

Thanks for the response. I figured I would have to hack it together by changing it on landscape.

There's got to be some way to be able to design for Android and iOS at the same time, though.


#6

Hi @Cricitem, it looks like you may have already made changes, but the behavior on iOS sounds like overflow, where if there is overflow, iOS will attempte to fit the whole page, including the overflow amount, on the screen, making everything super small.

Now when I look though, I do not see any overflow on the site, so maybe you have already made changes per @vincent's video.


#7

I have not made the changes yet on the final site. What device are you using and which page is it you're looking at... the read only link or the final site?


#8

Hi @Cricitem, thanks, it does not appear to be overflow and it only happens on the rendered site on iOS, which probably is due to some flex basis rendering bug in iOS.

I am taking a further look, sometimes that can be corrected by adding % based width/height to elements, along with the flex-styling. Hang in there while I take a look :slight_smile:


#9