iPhone 6/6s formatting problem

I’m receiving reports from users on iPhone 6 and 6s that they are seeing elements jammed under each other. One of the users was able to tell me that he’s running iOS 10.3.2.

On their phones, our site looks like this:

It’s supposed to look like this:

Is there a (hopefully) easy way to address this issue?


Here is my site Read-Only: LINK
(how to share your site Read-Only link)

Hey @kenmoon
Welcome to the community :smiley:

My first guess would be the float:left on that image. I saw somewhere on github that iOS have some troubles rendering sizes of elements with a float property and no size. So, try to remove the float or give the image a size.

2 Likes

@avivtech Thanks for that insight! I tried removing the float but that didn’t work, but it did lead me to try adjusting the height, which works when I change it in the DOM inspector, but can’t figure out how to change in Webflow…

More specifically, if I remove “height:100%” from ._2column (I’m using browsterstack to debug), the elements display properly.

So I go into Webflow, and set the height to Auto on the element. But when I recheck the height is still set to 100% (cache is flushed). Looks like something that gets added programmatically?

As it turns out it, changing the height value to “Auto” does fix the problem, I guess there was a some caching happening after all.

@avivtech Thanks again for pointing out the image as the offending element, it sent me down the right path.

1 Like

This topic was automatically closed 60 days after the last reply. New replies are no longer allowed.