Kevin Powell - Community

KPC

Kevin Powell - Community

A friendly place for developers to meet other devs, ask questions, get help, and just have a good time 🙂.

Join

front-end

resources

back-end

ui-ux

os-and-tools

How to prevent height:100svh; from eating the whole page when collapsing it vertically?

When you put height:100svh; and start resizing it vertically, page starts losing elements, on both top and bot, instead of being able to scroll at some point?

Is using `aria-labelledby` redundant on an `input` element if already has an associated `label`?

Is there any point of the former over the latter? ```html <label for="foo" id="bar">Label</label> <input id="foo" aria-labelledby="bar" />...

Parallax scroll causes a white rectangle to appear in a weird position

In the Codepen below I was trying to recreate a no-js parallax effect, the parallax works, but two things I didn't understand how they were happening, The first one is once you start scrolling a white rectangle appears, I don't know what it is and couldn't find its element on the DOM, the second there is a white space that appears at the end of the page and I have no idea why? Does anyone have an explanation for this? https://codepen.io/taro-naza/pen/oNVPmjZ...

Header clipping (transition not smooth)

So, I attempted to code a header that was meant to drop down smooth when a user scrolls down the website and then go back to normal when the user is at the top of the web but I couldn't figure out how to make the transition smooth. The header just clips which makes the website not look as good as it could. I'll link a code pen below of all the code so you can test it out and see what I'm attempting to explain. https://codepen.io/hrphyn/pen/RwdeWav...

Help make my website more responsive to smaller screens

My website is pretty responsive especially on normal browser screens when minimized but it looks terrible when you're on a mobile device I had Kevin help me but his explanation was pretty professional I didn't understand all of it If I can send a CodePen of all the code and someone can take a look and help me out that would be great.

Code the shape

How can I create this shape by html and css?
No description

Navigating Programmatically

I've set the router DOM just for one page ```import {Routes, Route} from 'react-router-dom'; import styles from './style'; import { Navbar, Hero, Stats,Business,Billing,CardDeal, Testimonials,Clients,Job,CTA,Footer,...

Centering and Resizing my <a> links

For my navigation bar, I want my links (with the white background) to be vertically centered and the text to be bigger. I've tried solving it with different display: types in my css, but nothing seems to work. HTML ```html <nav>...
No description

Help with simple height animation?

https://codepen.io/DovahTheKiin/pen/BabqBGE I want to make second div change it's height and that first one, together with it's content to follow it, but I want to avoid any hard-coded values. something like this Kevin's video: https://www.youtube.com/watch?v=B_n4YONte5A...

Base Web /baseui StatefulRangeDatePicker

I want this date range selector from base web in my react component: https://baseweb.design/ladle/?story=datepicker--datepicker-time&theme=dark&width=640 Here is a react playground of the code that is offered in the above link: https://playcode.io/1756853 ...
No description

Can I nest div liek this in scss

.RIGHT3DOTS .RIGHT4DOTS .RightBig4Dots .LEFT3DOTS .LEFT4DOTS .LEFTBig3Dots {
opacity: .5;
}
.RIGHT3DOTS .RIGHT4DOTS .RightBig4Dots .LEFT3DOTS .LEFT4DOTS .LEFTBig3Dots {
opacity: .5;
}
...

Vertically align `label` and `input`, without messing up the line-height?

So this is something that's been bothering me lately. If I have a label and an input (no matter what type), how can I vertically align them when there's one row, but also make sure that if the label is on multiple lines, that it's actually just the first row that aligns? Let's say the label content would be: "Label Second line"...
No description

Hebrew Virtual Keyboard

Hello everyone, I am trying to implement hebrew virtual keyboard on the frontend application. I am making use of react simple keyboard library. Does anyone has worked on this library. I need to know how to handle responsivess for the keyboard.

Why and How of Vite

everyone says that vite is the future, it's blazingly fast and all that. But I have a question traditionally, We use Webpack or any other bundler ri8? but bute vite is not a bundler at all it uses ES build, Rollup. if es build or rollup is faster why can't we use that instead why vite ?...

HTML/JS Table

Does anyone know html/js/css tables the website cricinfo.com uses? Tables have frozen columns which work well on mobile etc....

How to choose specific element

Hi! In this code I want to select the first <p> in both, but with different color. In the one with class:"schedule-item ice-spice" I want the first <p> to be blue, in the second, with class="schedule-item performance" I want the first <p> to be red. ...

How to recreate this effect? (Figma settings inside)

The white slightly transparent and blurred effect...
No description

Favicon Doesn't work

Tried doing this: <link rel="shortcut icon" type="image/x-icon" href="./favicon.ico" />, doesn't work though and my logo doesn't show up.