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';
});
And for it to work I set 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 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/yLWXPRb0 Replies