Jump to content

Make title text full page width whilst staying responsive to window/screen sizes.

Recommended Posts

Hi,

I have some text (project titles) that are set to full width of content on my site, it all looks fine when full screen on desktop, but when I scale the browser down the text visibly overflows to the right of the block into the white margin. I would like to contain the title in the block and have the text responsivley scale down within the full width block (not breaking the line or overflowing).

I have tried to use a text box with heading 1 font settings and some custom CSS to achieve a responsive design that contains the title when scaling, aswell as using a code block and writing my own CSS, both have same result...

I feel like I'm missing something and can't find another answer to this issue, any help appreciated.

Thanks 

Link to title example: https://www.alexchinneck.com/in-a-while-crocodile-test

 

Edited by sophieacs
Link to comment
  • Replies 2
  • Views 717
  • Created
  • Last Reply

Top Posters In This Topic

Top Posters In This Topic

Posted Images

  • 3 weeks later...

Hi @tuanphan

Thanks for your response, I tried the code you suggest in the custom CSS section but hasn't achieved the result I am aiming for. At full screen the title is full width but as soon as I scale the browser window down it breaks the title onto a new line rather than scaling the text responsively and maintining the single line. I have attached a screengrab of the issue and left the code in place on the original link above to test.

 

Any further assistance would be really appreciated.

 

Thanks

Screenshot 2023-02-09 094421.jpg

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.