naiden Posts - Answer Overflow

naiden

•Created by naiden on 11/6/2024 in #front-end

Help with a CSS selector that targets all elements that have "aria-*" attributes

Is it possible to target all elements that have an attribute with a specific prefix like "aria-"? I want to select all aria attributes like "aria-label", "aria-labelledby", "aria-level" and so on...

24 replies

KPCKevin Powell - Community

•Created by naiden on 6/6/2024 in #front-end

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/yLWXPRb

1 replies

KPCKevin Powell - Community

•Created by naiden on 12/24/2022 in #front-end

Mapped images not showing in production

Hello, I'm developing a practice project from Frontend Practice (https://www.frontendpractice.com/projects/stark) using React + Vite.js and SCSS. After almost 3 months of work each day I am ready to deploy it to showcase it on my github, but... after building and running npm run preview to check the images in my testimonial slider section are not showing (I get a 404 error). I am mapping an array of hardcoded data (https://github.com/naiiiden/frontend-practice-stark-homepage/blob/main/src/components/Testimonials/Quotes.js) and displaying each testimonial at an interval of 6 seconds (https://github.com/naiiiden/frontend-practice-stark-homepage/blob/main/src/components/Testimonials/Testimonials.jsx). It works fine in development but the images are not showing in production 😦 I've tried several possible solutions I found in StackOverflow but none are working for me. Maybe someone can help me here, thank you in advance 😛

5 replies

Gaming

Programming