Jump to content

Need help to customise a line break in a text header on mobile view

Recommended Posts

Site URL: http://www.gogo-cheng.com

Hi there. Looking for some help as completely new to coding. When in mobile view the line breaks on my landing page header are set how I want them - see left hand image, with 'Customer Loyalty' on one line. But when I view the website in real life on my phone it rearranges the text to the right hand view. No amount of tweaking the font size or box size seems to be making it play ball - is there a code for setting the line breaks?

THANK YOU - website goes live Monday next week so any thoughts super welcome!


Screenshot 2022-09-09 at 09.46.10.png

Link to comment
  • Replies 1
  • Created
  • Last Reply

Top Posters In This Topic

Popular Days

Top Posters In This Topic

Posted Images

The line breaks are responsive to the width of the device that you're looking on as well as the scaling on your phone, so this can be challenging to make look identical to everyone. You could adjust the heading font size just on mobile in that section using a vw property rather than rem or px, that would make the font size vary depending on the width of the device, and would do a better job of keeping the text on three lines as you want it.

Can you share the password for the website? I can provide you with a little custom CSS that should achieve this look for you.

Please like and upvote if my comments were helpful to you. Cheers!

Zygmunt Spray
Squarespace Website Designer
Contact me: 

🔌 Ghost Squarespace Plugins (Referral link)
📈 SEO Space (Referral link)
 SquareWebsites Plugins (Referral link)
Spark Plugin (Referral link) 

 Did I help? Buy me a coffee?

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.