Incorrect Formatting on Mobile

Mark Flint

• April 11, 2021 16:44

Hi guys,

I've raised this on Facebook too, but I'm getting some formatting errors on mobile.

Take this page for example: https://kineqtdirect.com/3-things-you-need-to-know-before-getting-a-remortgage/

1. All the headings have wide letter spacing, when they're set to 0.0
2. Line spacing between paragraphs has disappeared, so all the text is bunched together
3. The legal text in the footer is set to fully justified, but on mobile it's left justified

This is on mobile on iPhone.

It looks fine on Chrome mobile view and the Brizy mobile editor.

Could you investigate and let me know how to fix it please?

Thanks,

Mark

0

• 

  Alex

  • April 12, 2021 18:17
  • Edited

  Hi Mark,

  can you please give us more details? This is how it looks on iPhone 7: https://jmp.sh/4IPlSKr Please send some screenshots of the editor and the look you see on your mobile so we can see the difference. Thanks.

  btw: Please make sure you have this issue with the latest Brizy versions - Free 2.2.12. and PRO 2.2.9. Also, do you have the same problem if you disable all your external plugins?

   

  0
• 

  Mark Flint

  • April 13, 2021 09:57

  Hi Alex,

  It should look like this: https://kineqtdirect.com/wp-content/uploads/2021/04/Screenshot-2021-04-12-at-20.00.51.png

   

  So with line spacing between each line of text.

   

  I updated to the new versions yesterday (was holding off as some people had said there were errors). Emptied cache too and it still didn't look right.

   

  I have since put each paragraph into a different text element though, which obviously fixes the issue. This isn't a very practical solution though... Is this the only way to fix this or is there something you can do?

   

  On the heading character spacing, I've narrowed this down to that particular font (DM Sans Display). And there may be a solution here: https://www.outsystems.com/forums/discussion/55032/when-importing-a-google-font-outsystems-increases-the-letter-spacing/

   

  Does that make sense to you? Is there a way for you or me to fix that?

   

  Thanks,

  Mark

   

  0
• 

  Alex

  • April 13, 2021 17:57

  Hi Mark,

  thank you for all these details and I'm glad you found a temporary solution. But, once you've changed the structure, we can't inspect the problem. I think that the problem does not occur specifically on mobile but in safari (given that you most likely have Safari on your iPhone). Have you checked this in Safari on laptop? Or, you can create a test post where we can see the problem and test it in different circumstances.

  0

Please sign in to leave a comment.