Jump to content

Trouble with line breaking of site header on mobile

Go to solution Solved by christyprice,

Recommended Posts

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.

Screenshot 2022-01-27 at 10.26.55.png

Screenshot 2022-01-27 at 10.27.23.png

Edited by Skovbo
Typo
Link to comment
  • Solution

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;
	}
}

 

Link to comment
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 🙂

Link to comment

Create an account or sign in to comment

You need to be a member in order to leave a comment

×
×
  • Create New...

Squarespace Webinars

Free online sessions where you’ll learn the basics and refine your Squarespace skills.

Hire a Designer

Stand out online with the help of an experienced designer or developer.