-4

I am working on a site, currently in development, and I see that only on Chrome for Mac text with an Absolute position is breaking to two lines. This doesn't happen on Chrome for PC, or Safari. The development link is http://boldoriginal.com/sites/lana/ and here is a screenshot for reference:

enter image description here

If I remove the Absolute property from the text, it straightens out. I'm not entirely familiar with Mac's idiocracies so I feel like this is a common problem, but I can't find anything about it.

Keith Petrillo
  • 151
  • 3
  • 17
  • 1
    When asking questions on Stack Overflow, please construct a [mcve] demonstrating your problem rather than linking to your site -- as is, once you fix the bug on your site, this question would become useless to future users. – Daniel Beck Mar 18 '18 at 21:51
  • I see people post screenshots with live links all the time – Keith Petrillo Mar 18 '18 at 21:54
  • Yes, you do. Those questions tend to get closed, eventually, but the review queue can't always keep up. It's an uphill battle. – Daniel Beck Mar 18 '18 at 21:55
  • Okay so then here's an update, the text is .class { position: absolute; } and the text wraps to a second line. – Keith Petrillo Mar 18 '18 at 21:57
  • Okay so then here's an equally detailed answer: the containers for the text are too small. Make the containers bigger. – Daniel Beck Mar 18 '18 at 21:58

2 Answers2

0

Give the element width: 100%.

Derpanel
  • 329
  • 2
  • 7
0

The issue was text-rendering: optimizeLegibility; for anyone else having this issue.

Keith Petrillo
  • 151
  • 3
  • 17