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

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

Because you use white-space: nowrap;

Add this to Design > Custom CSS

@media screen and (max-width:1200px) {
.title {
    white-space: normal;
}
}

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