taylahroberts1 Posted July 24, 2023 Posted July 24, 2023 (edited) 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 Edited July 24, 2023 by taylahroberts1 adding in website URL
bycrawford Posted July 25, 2023 Posted July 25, 2023 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. Sam Crawford | by Crawford. Multi-award-winning Squarespace expert e. sam@bycrawford.com w. bycrawford.com 💸 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.
CassAggett Posted July 25, 2023 Posted July 25, 2023 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... Instruction: How to set a site-wide password 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. WEBSITE • INSTAGRAM
taylahroberts1 Posted July 25, 2023 Author Posted July 25, 2023 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 😞
taylahroberts1 Posted July 25, 2023 Author Posted July 25, 2023 Attached is a video of a site that I want to emulate - simply put, I don't want the text to move at all, and when the screen is made smaller it just eventually cuts off. Any ideas on how I can achieve this? Screen Recording 2023-07-25 at 8.03.15 AM.mov
Solution CassAggett Posted July 25, 2023 Solution Posted July 25, 2023 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'; } Instruction: How to set a site-wide password 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. WEBSITE • INSTAGRAM
taylahroberts1 Posted July 26, 2023 Author Posted July 26, 2023 @CassAggett - Thank you so much!! That makes so much more sense to do it like this. 🙂 CassAggett 1
taylahroberts1 Posted July 26, 2023 Author Posted July 26, 2023 @CassAggett - May I still ask, do you know how I can stop text from collapsing like in the video above? I've swapped over the text as per your suggestion and it's looking much better but I'd still like to give that as an option. Thanks!
CassAggett Posted July 27, 2023 Posted July 27, 2023 (edited) @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 July 27, 2023 by CassAggett Instruction: How to set a site-wide password 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. WEBSITE • INSTAGRAM
Recommended Posts
Create an account or sign in to comment
You need to be a member in order to leave a comment