Elements in mobile view are all shifted


#1

Is anyone else experience their layout shifting in mobile view? Everything looks great and centered when I design in Unbounce and preview. But after publishing and viewing on a mobile device, most elements are shifted to the right.


Introducing Google Fonts! 🎉
#2

Hey there!

This issue popped up in the last week or so. The best way to explain what happened is that Safari seems to have changed the way they render text, and it’s not playing well with an algorithm that we have that makes sure text looks the same across all browsers.

Our team’s been working on a fix for this, and from what I understand, this should be solved this afternoon. In a few hours, republish your page and let me know if that does the trick. If anything comes up I’ll let you know! :wave:

Cheers


#3

This issue has been driving me nuts all day long today. I’m glad to hear that I’m not crazy and that it is actually an Unbounce / Web Browser problem.

Thank you for asking about it Vidday, and thank you Jess for responding.


#4

That’s always such a lovely feeling! :blush:

I just checked back in with the developers and it’s nearly fixed! I’ll keep this thread posted :blush:


#5

Hey @Eric_Chowles and @Vidday!

Just wanted to check back here and make sure you’re both aware that the text alignment issue has been solved, and if you republish your page (if you haven’t already) all will be well! :blush:

Let me know if you have any questions. Cheers!


#6

Just came here to post about this!

We also tested on iPhone devices in Chrome and experienced the same issue, so it would appear the issue is not only Safari-specific, but rather iPhone specific?

I’ll republish our pages to see if that does the trick. Thanks!

Edit: Confirmed that republishing fixed the issue. Thanks again! :grinning:


#7

Hey, just wanted to mention that we’re having this issue again, both in Chrome and Safari on iPhone devices.

Interesting note: elements appear shifted on first load, but after refreshing the page they line up correctly again. Unfortunately, I can’t remember now if that’s the same behavior that we had experienced before, but I seem to recall that reloading the page previously didn’t make any difference.


#8

Thanks for letting us know. We’ve noticed. It’s better than before because it use to never fix itself with a page refresh. Unfortunately we often only have 1 chance with new users visiting the landing page and I doubt they will be refreshing the page. :frowning:


#9

We are having this problem as well. This is a big problem. Please help, Unbounce!


#10

Hey @Vidday and @Steven_Duque,

Unbounce support gave me this workaround and it seems to be working. If you haven’t already, try adding this script to your pages (Before Body End Tag) and see how it goes!

<script type="text/javascript">
  window.setTimeout(function() {
  $('.lp-pom-text').each(function(i, el) {
  if (el.style.width) {
  el.style.width = null;
  }
  })
  }, 100)
</script>

#11

Hey all!

Looks like @leah.ann shared this script from support, which seems to solve the issue. If this doesn’t solve the pain point for you, be sure to reach out to our awesome support team (support@unbounce.com) and we can dig in further. :slight_smile: