Jump to content

Site title covered up on smaller screens

Recommended Posts

Hi there, 

Hoping I can get some help with this site title/border issue!

On smaller screens (e.g. iPad and iPhone, screenshot attached), the borders of my site are cutting off the top of the site title. This is a custom font - perhaps that has something to do with it?

Any help would be much appreciated.

Thank you.

IMG_2059.jpg

Link to comment
  • Replies 7
  • Views 1.1k
  • Created
  • Last Reply

Top Posters In This Topic

Hi, 

Yes - the font is pushed right to the top there. Renée should have an accent on the top of the E (as per your screenshot).

You can see in my screenshots that this is cut off, and the top of the font is ever-so-slightly cut off too. 

It would be great to space this further from the top of the screen and stop the font being cut off.

Any help is much appreciated!

 

Link to comment

Change your font code to this & add other font format urls

@font-face {
    font-family: CEDARWOOD;
    src: url(https://static1.squarespace.com/static/623a10a9bc63062a5f099482/t/64be2c55304e3077f67e65c4/1690184789436/HVCedarwood-Regular.otf);
    src: url(enter ttf url here;), url(enter woff url), url(enter woff2 url);
}

 

Email me if you have need any help (free, of course.). Answer within 24 hours. 
Or send to forum message

Contact Customer Care - Learn CSS - Buy me a coffee (thank you!)

Link to comment
  • 1 month later...

I tried adding that code in, but it's still formatted incorrectly on mobile and smaller screens. Here is the start of my code where I'm formatting in the new font and the site headings:

Quote

 

/Adding in HV Cedarwood, named "CEDARWOOD"//
@font-face {
    font-family: CEDARWOOD;
    src: url(https://static1.squarespace.com/static/623a10a9bc63062a5f099482/t/64be2c55304e3077f67e65c4/1690184789436/HVCedarwood-Regular.otf);
    src: url(https://static1.squarespace.com/static/623a10a9bc63062a5f099482/t/6620a6d21758181713f04ab1/1713415890432/HV+Cedarwood+Regular.ttf), url(https://static1.squarespace.com/static/623a10a9bc63062a5f099482/t/6620a6fabca11959025efae2/1713415930728/HV+Cedarwood+Regular.woff), url(https://static1.squarespace.com/static/623a10a9bc63062a5f099482/t/6620a70bb318df2f52fa9f75/1713415947068/HV+Cedarwood+Regular.woff2);
}

//HEADINGS//
h1 {
font-family: 'CEDARWOOD';
}

h2 {
font-family: 'CEDARWOOD';
}

h3 {
font-family: 'CEDARWOOD';
}

h4 {
font-family: 'CEDARWOOD';
}
//SITE TITLE//
.header-title-text a {
  font-family: CEDARWOOD !important;
  text-transform: uppercase;
  font-size: 3rem;
  letter-spacing: 1px;
}

 

I've also attached a screenshot of what it is looking like on mobile. I've cleared my cookies.

Many thanks for your help!

IMG_0573.PNG

Link to comment

It looks like the code doesn't work on iOS only. This screenshot from Android. Maybe problem from custom font itself.

You try checking the site where you got the font to see if problem appears here or not. If they have same problem I think you need to contact font author or change to another font.

image.thumb.png.1c6dfb9cffd02b8c08ec19effed4ff83.png

Email me if you have need any help (free, of course.). Answer within 24 hours. 
Or send to forum message

Contact Customer Care - Learn CSS - Buy me a coffee (thank you!)

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.