Skovbo Posted January 27, 2022 Share Posted January 27, 2022 (edited) Site URL: https://mathiasskovbo.com/snedker-portfolio I have trouble with a header text, which on mobile is too wide to show, and then it breaks the line into 2 lines of text. Problem is that this text is written over one another, and I can't seem to figure out how to add spacing or fix it? Site link: https://mathiasskovbo.com/snedker-portfolio The Heading is type Heading 1, and the text is "Snedker Portfolio" with the font "Kom A" in size 16px. Edited January 27, 2022 by Skovbo Typo Link to comment
Solution christyprice Posted January 27, 2022 Solution Share Posted January 27, 2022 Hi @Skovbo, this looks to be a line height setting. If you go into Site Styles: Fonts: Headings and increase Line Height this should take care of that overlap. Or you can target it with some Custom CSS for mobile screens: @media screen and (max-width: 767px) { h1 { line-height: .9 !important; } } Skovbo 1 christyprice.com 🇺🇸 Austin, TX US ✅ For Web Designers: Squarespace Client Process Checklist. Save time and bring consistency to your web design projects. Receive a Notion doc template with my 100+ item client process checklist. Link to comment
Skovbo Posted January 28, 2022 Author Share Posted January 28, 2022 13 hours ago, christyprice said: Hi @Skovbo, this looks to be a line height setting. If you go into Site Styles: Fonts: Headings and increase Line Height this should take care of that overlap. Or you can target it with some Custom CSS for mobile screens: @media screen and (max-width: 767px) { h1 { line-height: .9 !important; } } Thank you so much 🙂 christyprice 1 Link to comment
Recommended Posts
Create an account or sign in to comment
You need to be a member in order to leave a comment