Issue with overflowing text

I'm developing my portfolio website and I'm trying to achieve a very minimalistic and typographic design. On initial page load the text has ultra large font-size and as I scroll down the page the font-size scales down. Here's how I do it:

window.addEventListener('scroll', () => {
    let fontSize = Math.max(32, 300 - 0.05 * window.scrollY); 
    main.style.fontSize = fontSize + 'px';
});

window.addEventListener('scroll', () => {
    let fontSize = Math.max(32, 300 - 0.05 * window.scrollY); 
    main.style.fontSize = fontSize + 'px';
});

And for it to work I set

position: fixed

position: fixed

on the <main> tag and a big height on the <body>.

I have an issue with overflowing text when I view my website from a device with a small screen. Adding a fixed height to the <main> tag and setting it a

overflow-y: scroll

overflow-y: scroll

doesn't fix the issue.
The problem can be replicated by viewing the page on iPhone SE dimensions but it is possible to occur on larger devices if I add too much text.
Maybe this approach isn't the best and I'm looking for suggestions.

https://codepen.io/nanca/pen/yLWXPRb

CodePenNaiden

yLWXPRb

...

KP-C

Kevin Powell - Community•2y ago

naiden

Issue with overflowing text

window.addEventListener('scroll', () => {
    let fontSize = Math.max(32, 300 - 0.05 * window.scrollY); 
    main.style.fontSize = fontSize + 'px';
});

window.addEventListener('scroll', () => {
    let fontSize = Math.max(32, 300 - 0.05 * window.scrollY); 
    main.style.fontSize = fontSize + 'px';
});

And for it to work I set

position: fixed

position: fixed

overflow-y: scroll

overflow-y: scroll

CodePenNaiden

yLWXPRb

...

Issue with overflowing text

Similar Threads

Issue with overflowing text

Similar Threads

Similar Threads

Similar Threads