I’m using rich text to display a larger heading in a more custom font. But on mobile screens the hyphen is showing which looks terrible for user experience… Is there a way to get rid of this through the code I’m using?
<h1 style="font-family: 'Playfair Display', serif; text-align: left; font-size: 38px; hyphens: none;">We manage and reduce your gifting carbon footprint.</h1>
Do you want the hyphens removed for all devices, or just mobile?
This works for me.
<h1 style="font-family: 'Playfair Display', serif; text-align: left; font-size: 38px; hyphens: none;">We manage and reduce your gifting carbon footprint.</h1>
<span style="hyphens:none">We've partnered with Toitü Envirocare to analyse and understand the carbon footprint of our corporate gifting. We are designing a gifting lifecycle that manages and reduces greenhouse gas emissions each step of the way.</span>
All devices please. On the glide viewer for mobile and desktop there are no hyphens, but when viewing the live page on my mobile phone there are. Is there a solution?
I figured out this code would work:
h1 style=“font-family: ‘Playfair Display’, serif; text-align: left; font-size: 38px; -webkit-hyphens: none; -moz-hyphens: none; hyphens: none !important;”>We manage and reduce your gifting footprint.</h1
So your problem has been solved?
Adding webkit and moz cases is good, cover all bases.
This topic was automatically closed 24 hours after the last reply. New replies are no longer allowed.