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

technique where background expands box dimensions to spare wrapper element?

I remember vaguely that there was a trick that I've seen in a video from kevin where he shows how to expand a background without relying on a wrapper element. For example, when your text is supposed to have inline padding/margin to the parent borders, but the background should then expand to the parents width. Do I remember correctly that there was a trick or do I need a wrapper element?...

I need help with responsive

I'm trying to make the mobile responsive, and I truly need your help. Also, I would like some advice to get better at doing responsive, thanks! Note: The image is not showing in code pen. https://codepen.io/Jonah-the-lessful/pen/mdgmOrE
No description

Slideout nav that handles keyboard navigation and overflow

I'm really stuck on this slide out, multi-level nav. It's made from nested lists to maintain the proper tab order but I'm having these troubles: 1. Adding vertical scroll to each new sub level that exceeds my desired max height. 2. Backgrounds of each level should be the same height. 3. Animation should slide from behind the parent nav (currently sliding from front). I have a codepen example that demonstrates the issue here: https://codepen.io/matthanes/pen/wvZdzBw...

How to make height and width responsive

I’ve been working on this project for a while and it works perfectly just how I want it on my pc but when I try to run the code on other devices it has this weird scroll bar towards the right. Can I please get some assistance with this?
No description

attribute values in custom props?

So since we can do content: attr(data-value), I’m curious if there’s a way to store the value of attributes within custom properties ? Can I do something like —_value: attr(data-value)? Will it look for an attribute of [data-value] on the element I use it on ?

Stripe PaymentMethods Component

Has anyone used Stripe's PaymentMethods? I would like to obtain the user's card token through this component, but so far I have not been successful
No description

Making site responsive

How can i make my site responsive?

background animation

Been trying to figure out how to create an infinite background animation that scrolls from right to left across the viewport in an infinite loop. So far, none of the tutorials that I have tried seem to work, so I thought I would post here and maybe someone else can notice something about my markup or css that explains my lack of results. Here is what I currently have: <!doctype html> <html lang="en-US"> <head>...

Flexbox w/ justifyContent: 'space-between'

Hello! I'm attempting a status page where these device status are aligned to the right of the device name. Once they touch eachother, all three should drop down to the second row via wrap. The problem I'm running into is that the word Maintenance is longer than the other two, so it drops earlier. How can I make them drop at the same time without messing up the spacing so that it is "end" for justifyContent when it doesn't wrap?
No description

development npm website is not auto refreshing my react app

so i'm working right now in a medium react project everything was good until i bought a new computer after moving the project file to it and type npm start the website show no errors but when i edit my code is not auto refreshing and i can't share the code in github bcz it's big so can you help and do you have a way to how?btw im still beginner to react

Trouble having elements layered properly

I'm working on a project and I ran into this problem. Simplified version of the code I'm using: https://codepen.io/chrispitts/pen/WNWpmWb?editors=1111 The pen shows exactly what I want the result to look like, however the issue with it is that the button isn't clickable. Essentially I want the layout order from top to bottom to be like this:...

how i can add type to file that doesn't not exits

```ts import type { WathqnyConfig as WathqnyConfigType } from "wtqtypes"; /** @type {import('wtqtypes').WathqnyConfig} */...

:root most common customer variables

What are the most common custom properties you should put into the :root? Font-size Font-weight Colours what other ones do you use?...

CSS Margins Help

Hello All, I'm still learning the basics of CSS and am having trouble with my code. Forwhatever reason my main title page that says "PergolaLuxe" has a top and bottom margin, as shown when inspected. I for the life of me cannot find why this is occuring within my code. Any advice is appreciated. Thanks in advance!
No description

position absolute element is underneath other element

im trying to create a dropdown component in react, the dropdown whose position is relative has a button and a div which is position absolute but the position absolute element is cropped by container of the dropdown component ``` <section className={styles.SnScontainer}>...
No description

how to set image for domain when paste into socials

i want add image when i paste link website into facebook , it will show image , web that i use deployed on vercel
No description

Dynamic scroll with fade in/out

I am attempting to create a dynamic scroll, where a single paragraph and corresponding image are displayed one at a time. As you scroll, the first paragraph/image is replaced by the second with a fade transition. I can't seem to get only one paragraph and image to show at a time. Would appreciate any help and if there is a cleaner way to do this with a React component or similar happy to explore that too! https://codepen.io/mycenas/pen/oNOZgoR

Is it possible to create this 3d button ?

Hello community is my first post on this Chanel. I'm french guy and my English is not perfect 😉 I'm not pro in css and i want some help 🙂 I want to create this 3d button but the problem is to keep all the black edge. I have try many solutions :...
No description

How to customize default <input> date picker?

Is there a way to edit the appearance of the default date picker? Right now, I'm just looking to change the primary color from blue to a specific color of red. (see image) Currently, I'm using the <input type="datetime-local"> HTML element through React. The project I'm tasked to work on is using React Bootstrap, but that doesn't seem to have its own date picker, so I went this route...
No description

Priority Plus Navigation

Hello, I am currently working on my portfolio site using react and I was wondering how someone might go about designing a priority plus navigation in react? Any interesting element measurement hooks I’m not aware of or something of the like? I currently have a version somewhat working with a useEffect hook that attaches a handler to the resize event of the page but would like to improve on it....