Mobile looks fine on Designer but not on actual phone

Design help General
1

Greetings webflow community… I am hoping you can steer me in the right direction, I am having a really hard time trying to figure out why my design looks fine in the designer for portrait and landscape mobile views, but not on my actual phone (iPhone).

I have attached screenshots of what it looks like in the designer, and on my phone. I tried to change all the pixels to percentages, and everything else I can think of. Not sure if it’s an issue I’m not understanding with flexbox or what. I have tried messing with z-index, and wrapping children etc. Maybe the issue is with the action? I’m stuck… I am using chrome on windows 10, and chrome on iPhone 6 plus.

Also please note that my site is live with just the coming soon page, so all of the regular site pages are in the InProcess folder.

Thank you so much for your help (I hate being a newbie)!
Terra

@Waldo

designer_version_portrait
designer_version_portrait379×520 33.4 KB
iphone_portrait
iphone_portrait720×1280 219 KB

Here is my public share link: [Webflow - Vine Dining][1]
Here is my live site link of the same page:
http://vinedining.webflow.io/inprocess/executive

2

I can’t help but think this is similar to my issue: Issues of Nav Menu showing up on IRL Mobile (Navbar fixed to bottom)

I hope someone can help us!

3

Since mobile safari is known to have issues with flexbox, you may want to set your elements to display:block.

CloudApp

hope this helps :slight_smile:

4

Thanks Nelson! I did everything in your super helpful video and it still looks the same. :frowning:

Also, when I changed the slide header text to 0 padding (per your video) it screwed up the placement of the title (don’t worry about that, I can figure that one out). It still looks good when I preview in Designer, (except the text), but on the iPhone in Chrome and all other browsers I’ve tested it is still not right.

Is it the action?? Thanks so much for your help… I feel like I’m talking to a famous person :wink: I watch your workshops all the time and you have helped me a ton!!! Thanks so much!

5

I think your canvas size isn’t set to you phone size

6

Thanks everyone for your help!! I think I figured out a workaround for now. I probably over complicated things :slight_smile:

7

LogoNado is providing Custom Logo Design Services around the world in very affordable price. Please try it out and let me know what you think…

8

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