Mobile in Landscape view worse than horrible

  • 11 November 2016
  • 14 replies
  • 15 views

Badge

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


14 replies

Userlevel 7
Badge +3

Hi Ed,

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

Best,
Hristian

Badge

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

Badge

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.

Userlevel 6
Badge +1

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.

Badge

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

Userlevel 7
Badge +3

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

Userlevel 6
Badge +1

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.

Badge

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.

Most of our company’s landing pages where build with a 1200 layout…in our case we cant take hundreds of landing pages to adjust them to 980px… do you have any idea how we can fix this problem? It looks horrible when taking from landscape to portrait orientation…i know that refreshing the page will make things look good, but the clients wont know…any idea how we ca fix this ? Remember that we have 1200px layout. Thanks!

Badge

Hi,

Do you have a URL you can share so I can see how it looks?

Yes, sure…i’ll give you this example: https://lp.ae.capex.com/rivian/ .

it’s better to enter on it directly from your phone… after you enter it, just rotate the phone, then put in the portrait mode again…the layout gets broke and it only becomes good again after i mannualy refresh the page from my phone

Badge

This is the script I was given to help with this issue. I’m not sure if there is a newer or better one. You could try it on a single page. If it works, you could go into the script manager and apply it at the domain level so it will work on multiple pages.

Badge

Oops, it looks like the script tag prevented the text from appearing. Here it is again, just add the opening and closing script tags.

var supportsOrientationChange = “onorientationchange” in window,
orientationEvent = supportsOrientationChange ? “orientationchange” : “resize”;

window.addEventListener(orientationEvent, function() {
window.location.reload()
}, false);

Reply