Mobile in Landscape view worse than horrible


#1

I’ve optimized my page for desktop and mobile. But, when I rotate the iPhone to landscape orientation, it looks like crap.

Any solution?

URL: landingpagefixer.com

ed


#2

Hi Ed,

Look into your external/3rd party scripts since something is messing with the viewport tags of your page.

Best,
Hristian


#3

Hi,

If you’re referring to any javacripts: I had three. Two related to
Google Analytics and one with SumoMe. I removed those temporarily and
republished - this had no effect.

The only thing I’ve found that helps is to duplicate every section,
optimize one version for mobile and the other for desktop and de-select
according to the view. Lots of extra work.

ed


#4

I got into a live chat with someone in support. The issue relates to a 600 pixel limit. I’m not sure what that means or how to fix it. I’m waiting on them to get back with a complete explanation.


#5

Hey @Ed_StanfieldI’d love to help, mobile is a specialty of mine, but the link does not seam to be working for 600px wide refers the width of the mobile view break point. Depending on how you designed your page there are always ways around it.


#6

Hi, and thanks for the comment. The issue is with simple text modules. So, if I increase the margins in the mobile view editor, that might fix it? I’ve tried that without success.

The URL is landingpagefixer.com

Ed


#7

It seems that adjusting the margins fixed the issue.

I just checked it on my mobile phone and all seems to be in place.

Best,
Hristian


#8

I would agree with @Hristian seams to be fine in landscape mode minus some small centering issues.

One thing I find that helps with text bugs in mobile is to not bother with the scaling tool and just use hide/show for desktop vs. mobile text. This way you have a clean text box to work with and you can format appropriately.

Also, the mobile view doesn’t not cover all phones exact. It is just a breaking point. So, it is also good to ensure that you are using a width in desktop view that adapts well. We still design mostly in 980-1000px wide for best results.


#9

I got a response overnight from Vanessa in support.

I hadn’t realized the issues were resolved if I manually refreshed the browser after I rotated my iPhone from portrait to landscape. She said there is a known issue “around the text algorithm not re-running when the size of the viewport changes.”

I was also provided this patch to place before end-of-body, and it forces a refresh automatically. So, this seems to have resolved the issue well enough. The version of the page that has modules out of place is only visible for a second or two until the refresh occurs.