Streaming live at 10am (PST)

Odd behavior in Mobile - Landscape view only


#1

*This only happens in Mobile - Landscape view (make sure you view it on an actual phone)

On the home page, the section to the right of “How I Help You Make Money” does not work as it should in the Designer, not sure why? See attached pic

Thanks in advance for the help!


Here is my site Read-Only: https://preview.webflow.com/preview/olumidegbenro?preview=2d8b9f2e256f59c8e167d4021f216ca0


#2

Hi @rhami

What’s the odd behaviour? It seems on mobile landscape exactly the same as the designer for me. Could you give a screenshot from your mobile, or let us know the way you expect it behave.

I’m on iPhone 7+ Safari updated


#3

Here you go man, thanks for the help! I think the screenshot shows the issue.

I have an iPhone 7 on Chrome.


#4

On Chrome on my phone it works perfectly.

The ONLY setting I can see that is different on landscape mobile is the parent div of those 3 blocks…
Could you remove that one style, just to try it. It’s not set on any other breakpoint, just that one.

CloudApp

No logical explanation as to why it might be that, but start at the most obvious and work backwards…


#5

Nice try but that didn’t work!


#6

Sorry @rhami :confused:
My Chrome just updated yesterday, is yours up to date too? v.66.0.3359.122

@cyberdave Another long shot, but could this be anything to do with the Chrome 66 issue you were working on here?:


#7

yes it’s up to date!

Any way to escalate the issue?


#8

I’ve tagged cyberdave in who is Webflow Staff, you can send an email to support@webflow.com

I appreciate it’s frustrating but try it on another device too if possible. It’s odd that it’s seem only yours is not working, which seems it’s more to do with your device/browser than a bug. I’ve just tried on cross browser as a few different phones and it works OK, and on an older Galaxy S5, an iphone 6 both in Landscape and it’s fine too.

Close the browser, delete the cache and try again.


#9

OK thanks I appreciate it!

Just as a note I tried it on Safari as well and same issue


#10


#11

Hi @rhami!

This behavior is being caused by the use of pixel units for the image 9 element - Since the width exceeds the viewport, it creates this additional spacing on the layout - since the resolution can vary between devices, you might only experience this issue in some phones and in other you might not even notice.

Instead of 500px width, I suggest to change the width to auto and change the settings for the absolute position:

Hope this helps :slight_smile:


#12

Thanks so much for the help, I tried everything you mentioned but still getting the same problem!

It’s very odd


#13

@rhami,

Seems that you are using Flexbox on this section - there is a known issue on how IOS renders Flexbox, so I’d suggest that you try to recreate this layout using Safari instead.

This way you’ll make sure that to correct any issues while designing and prevent odd Flexbox rendering for IOS devices.

Hope this helps :slight_smile:


#14

Thanks @Nita ,

Does that mean I should never use Flexbox going forward? Do you know if this will be fixed soon?

Thanks for the help!


#15

@rhami,

You can definitely keep using Flexbox - Iin this case, designing directly in Safari, can make it easier to implement small fixes to prevent further issues with how IOS browsers render Flexbox.

This is a known CSS issue in Safari - Take a look here: https://stackoverflow.com/questions/33502774/flexbox-not-working-on-ipad-and-safari

Hope this is helpful :slight_smile:


#16

Ok thanks, what do you mean when you say design in Safari?


#17

Hi @rhami,

You can use the Webflow Designer in Chrome and Safari - both are supported browsers.


#18

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