Skip to main content

Hi folks, I’m experiencing a layout issue with iPhone 5, 6, and 7.


Basically, what I expect is this:

34 PM


And what I’m getting is this in iOS 10.3 (iPhone 5, 6, and 7):

23 PM


Android does not appear to be affected:

24


In summary, some parts of the layout appear to be rendering at a width greater than the screen for iPhones, causing text to be misaligned, cut off, etc. Test for yourself at: http://www.buildingasecondbrain.com/


It seems to affect only some text boxes, but not all.


What could be causing this, and how can I fix it?

Hey Ben,


I tested it out on my iPhone 7, and did not see any of the issues in either Chrome or Safari. Also tested it on BrowserStack with a few different iOS and Android builds and also didn’t see anything out of place with the text. Looked good on all of the devices I checked.


Usually when I see something like this it’s due to a custom font, but I don’t think you’re using any custom fonts, yeah?

No custom fonts that I’m aware of. The issue was reported to me as affecting a native device, but I’m using the Xcode emulators to reproduce it. Unsure as to why you’re not seeing the issue. It’s pervasive… misalignment affecting multiple text boxes all the way down. If you don’t mind me asking, what version of iOS are you on?

I have seen the same problem on Iphone 6 Plus only, but usually is related with the use of Google or custom Fonts

I’ve seen this problem on i6 and i7, like everyone else it is usually custom font related. However, you could use a device/browser query in css and change the font size or break to have it fit.


I also do not see this issue on my i7.


Nice looking site btw.

I appreciate everyone’s ideas and thoughts. I’m not sure if a custom font is being used, but it’s entirely possible. Looks like I’ll need to dig into this a bit to sort out what’s happening. Thanks!

Hey @ben this definitely looks like something worthy of emailing our Support Team about. You can fire over an email to support@unbounce.com with a link to the page and we can dig into it for you. Or feel free to drop a link here and I can take a look for you. Happy to help however is most convenient for you.

I contacted support, and @samantha was kind enough to provide a workaround:


<script type="text/javascript">

  window.setTimeout(function() {

  $('.lp-pom-text').each(function(i, el) {

  if (el.style.width) {

  el.style.width = null;

  }

  })

  }, 100)

</script>

Sounds like there’s a permanent fix in the works, but this resolved our issue completely. Thanks, Samantha (and everyone else)!

Reply


Terms & ConditionsCookie settings