I’m trying to launch a site this weekend, and while the pages seem to be how I need them in all breakpoints, the mobile landscape on the published site is bonkers. Nothing like what appears in designer where everything seems fine. Portrait is fine, but spin the phone and - oh my gosh, what’s this?? Images and divs are out of alignment… Links that I’ve turned off, appear… Is there something I’m missing? This is my first website build ever, so there might be something very simple I’m missing, or at least I hope so… I have screen caps below of a few comparisons between portrait and landscape for your viewing pleasure. Read only link below
Any help or advice would be greatly appreciated, considering I’m sitting on defcon 5 over here. Thanks!!
Thanks for your reply, and your complement! I will look into that, for sure. But what I’m struggling with is the site responds just fine within the designer and review modes, it’s when the website is published everything goes haywire. So how do I make any adjustments to a site that appears fine within the designer? Also - newbie question - why is the mobile landscape designer window vertical, with no indication of the horizontal viewport? Seems strange… unless I’m missing something within a setting feature or something…
Apologies for the late reply, I don’t come here very often.
On the first question - I really don’t know why your web site works fine on Designer view and not when published. If you look at the screenshot, position Relative clearly can be the problem and has to be changed.
As for the second question - I am not quite sure what do you mean exactly. If you wonder why you can’t see Number 1, you need to put and hold your cursor on position Number 2. I hope that answers your question.
Did you fix the issues with the website? Is it working the way you wanted it now?
thanks for your reply. The issue with viewing my site on mobile is clearly a Webflow issue, I just seem to get them to address my issue… They’ve been pretty responsive, but have gone a little quiet lately.
I’ve replaced the homepage image with a cropped version for both mobile landscape and portrait. When I view my published site and view it in landscape, the site is pulling up the desktop background instead of the newly replaced ML image. Clearly an issue…
Have been on your website few times to figure out what the problem is and to help if I can - now I understand. I don’t think you can have different images for mobile landscape and portrait. I wanted to do that myself, but some of the moderators here said that it’s not possible.
Out of curiosity, did Webflow suggested some alternative solutions, because I would like to use your approach.
issue still has not been resolved. I have replaced different background images between different breakpoints and it seems to work. Webflow has suggested that some phones can be set to call up a desktop website when viewing in mobile. I’m not seeing how this could be the case considering my portrait view is correct, but the landscape is bonkers. They did acknowledge that their canvas inside the Webflow designer is much longer than a “real” device, which I completely agree with. They recommended reducing the vertical hight of my browser to better replicate an actual horizontal phone viewport, which certainly helped, but did not correct any of my issues. The website still looks good inside webflow, but for it to appear so bad (in landscape only!) just doesn’t make any sense.
I appreciate you help on this. I haven’t seen many people complaining about this within the forum, so I can’t be sure whether this is a “me” thing, or a webflow thing… I just viewed my site on my son’s phone and it looks correct! go figure. I’m now assuming it’s my phone… ugh.
Glad to hear that Webflow has been in touch with you - hopefully they will learn and improve.
All the knowledge that you gain by know will make you a better, more competent designer. Maybe you should design the site again, I am sure it will be a lot better from the one that you currently have.
I haven’t been to this forum for awhile, so I missed your inquiry. I’m not sure if everything is well, but I have learned why I’m experiencing these issues.
It’s all related to the breakpoints on my phone, the iPhone 11. It has a width in landscape of 864px, which is over the 767 max width for landscape on Webflow. As a result, the phone pulls from the tablet layout. I now understand what’s occurring, I just need to make some decisions on what to eliminate from the tablet view so the iPhone 11 will behave correctly.
I would assume Webflow would have adjusted their breakpoints to reflect current mobile device sizing, but that’s probably easier said than done.
@Dusan I hope you’ve figured this out as well. Took me forever! It all comes down to the breakpoint on a iPhone 11. It’s too tall (wide in a landscape breakpoint) and Webflow’s system leapfrogs right into the tablet version. I would have thought the Webflow would have adjusted the breakpoints at this point, but apparently not… As a result, my tablet layout needs to be modified (simplified) to accommodate the iPhone 11. Crazy. I hope you had better luck!
@Steveio - I believe they are stuck supporting existing sites. They would need to have a new CSS build that would be user/project selectable so not to introduce breaking changes. Seeing workarounds for < IE9 in the source is very telling. Bootstrap 5x is much more modern than Webflow’s build. Webflow seems stuck in the past for the forseeable future…
