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:
And for it to work I set
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
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
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/yLWXPRb
