Jump to content

HELP with using different text blocks in one heading

Go to solution Solved by CassAggett,

Recommended Posts

Hi! I'm hoping someone can help with this as I've scoured the internet and nothing so far. 

My client has a tricky branding guide, and it uses 3 different fonts in one heading. So I've uploaded the fonts and added them with CSS but now I'm having trouble with them moving all over the place when the screen is made smaller - because I'm using a different block for the text variations. 

See attached photos for reference. 

Image 1: Is how the text needs to look
Image 2: Shows the three different blocks used to get that style
Image 3: Is how it looks when the screen is made smaller. 

I've tried removing automatic hyphenation but it didn't work as I'm assuming it only works when everything is within one text block. 

Thank you! Any help is appreciated! 

URL: https://rachel-rebibo.squarespace.com/
Password: rr123

1.png

2.png

3.png

Edited by taylahroberts1
adding in website URL
Link to comment

Highlight the text inside each block and apply the stretch tool to it.

This will make the text fill it's container and it should then scale with all screen sizes.

Pic attached for reference.

Screenshot 2023-07-25 at 07.38.37.png

Sam Crawford | by Crawford.
 
Multi-award-winning Squarespace expert
 
💸 How I make $500k/year designing Squarespace websites: Watch the video
📱 Hire me to build your Squarespace website: calendly.com/bycrawford/call
 
Did my comment help? To help others benefit, leave a like and mark my answer as 'best'. This lets users scroll straight to the solution they need.
Link to comment

Is there a reason you can't use them all in the one text block?

I suppose it would make it more difficult to control spacing on mobile...

If this helped you, please like or mark my solution as answer so others can scroll to it quickly 👆

Cass Aggett is a Squarespace website designer for go-getting women – no matter what stage of business.

WEBSITEINSTAGRAM

 

Link to comment

Hi @CassAggett and @bycrawford - thanks for your replies! 

the reason I’m using three different text blocks is because I need to include three different fonts within the title.

I’m fairly new to Squarespace designing and still learning, so please let me know if there is a simpler way to include the 3 fonts in one block?

@bycrawford - unfortunately this didn’t work as it makes the text look all different sizes depending on the length of the word 😞

Link to comment
  • Solution
6 hours ago, taylahroberts1 said:

Hi @CassAggett and @bycrawford - thanks for your replies! 

the reason I’m using three different text blocks is because I need to include three different fonts within the title.

I’m fairly new to Squarespace designing and still learning, so please let me know if there is a simpler way to include the 3 fonts in one block?

@bycrawford - unfortunately this didn’t work as it makes the text look all different sizes depending on the length of the word 😞

I just noticed you have the fonts set as different sizes, e.g. H1 as capitals, H2 as the italic. If you want these to stay the same size, just use different fonts, you can set these further in CSS to apply to H1. E.g. if you bold H1 (and you don't need to use the regular bold version in a heading anywhere), you can set it to show the italic when you bold any H1.

E.g, this is your regular H1 font:

h1 {
  font-family: 'FONTNAME1';
}

This is for bold H1:

h1 strong {
  font-family: 'ITALICFONTNAME';
}

And this is italic H1:

h1 em {
  font-family: 'ITALICFONTNAME';
}

 

If this helped you, please like or mark my solution as answer so others can scroll to it quickly 👆

Cass Aggett is a Squarespace website designer for go-getting women – no matter what stage of business.

WEBSITEINSTAGRAM

 

Link to comment

@taylahroberts1 Is there a reason you'd rather have the text cut off when the screen size is made smaller? In the video it just looks like their website isn't responsive to browser sizes meaning it would be essentially inaccessible on anything other than a desktop. But no, I'm not sure how you'd achieve that!

Edited by CassAggett

If this helped you, please like or mark my solution as answer so others can scroll to it quickly 👆

Cass Aggett is a Squarespace website designer for go-getting women – no matter what stage of business.

WEBSITEINSTAGRAM

 

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.