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

Using Arc boost css file in my application

I have a react application. my design team have customised the design of every page using Arc boost , a new browser called Arc. now they want to see how we can overwrite all the existing stylings with the ARC css files. does anyone have any experience with this?

CDN friendly RGPD for font, js, etc

Hello, I am looking for a CDN (paid or free) that does not collect user data, allowing me to upload and download custom fonts or JavaScript without requiring the acceptance of third-party cookies. System-UI fonts is not approved by the UI team, so I am looking for a way to make a custom font available without using the Google CDN and without hosting it locally....

Position fixed with transform (behavior exploration)

Hi everyone. For the last 2 days I have been tinkering with this 'unknown behavior' where If I used transform to a container, the fixed position inside it would no longer work. The only way I managed to 'fix' this is by moving the element outside the container but that comes with a set of different problems such as breaking the layout and so on. ...

Adding an dataset attribute to rendered div of mat-tab from Angular Material

I want to add a dataset attribute on tab indicator div rendered by mat-tab component for label. Here is the link for stackbliz, https://stackblitz.com/edit/d7db8c-2kpdac?file=src%2Fexample%2Ftab-group-align-example.html...
No description

Responsive container : max-width or padding ?

Hi, When I create a website, I usually use <section class="container"></section> and ...

React router dom is not redirecting to the route even though the url is changed

Hey I am facing a error. when I try to log in with my admin account on a website I am working in. The url changes but it doesn't redirect me to the admin dashboard. If I reload the website then I will be redirected to the admin dashboard and the issue won't come in if I don't reload after logging out. Why am I getting this error and how to fix it ?...

Seeking Assistance: Centering Issue with Flexbox Header

Hi, I hope you all are doing well. I am writing code for a little design. However, I am facing an issue. As you can see in my header, I have three items: 1- Logo...
No description

Jumping for character

Hello, I am having an issue with making a jumping animation for my character. Here is the code: ```js export function handleKeyDown(event) { const Ita = document.getElementById("Ita");...
No description

Can some review my attempt at this coding challenge?

I deployed it on GitHub pages This is the URL. https://davesamuels1998.github.io/Newsletter-sign-up-form-challenge/ I think I was told that I used a lot of width and height values in many places and that could be bad. Any suggestions towards that. I can't think of anything....
No description

overflowing text in grid area

currently trying to troubleshoot this one: I have a grid of columns, where each item is a grid of implicit areas, and in those areas some text overflowing. The structure is pretty much this: .grid-of-columns>.grid-of-areas>.grid-item>.text ...
No description

max-width media query not applying to max value

I have an odd issue where my max-width media query; eg: @media (max-width: 1023px) is working on everything below <1022px, but at 1023px, it doesn't apply. I have checked dev tools and confirmed this issue. There does not appear to be another media query (eg: @media (min-width: 1023px)) being applied. I know my issue is impossible to diagnose without code, but does anyone know general reasons why this could be happening? I read MDN and it should be applying <=1023....

[React] How does this code look to you?

Friend and I spent a few hours yesterday trying to get setInterval and useEffect to work on our little workout app. Brains were fried, and it works, but we're curious on your opinions on how we 've done it. Can't copy paste the code, but everything is inside the Timer.jsx file. https://github.com/callum-laing/react-playground/blob/main/src/components/Timer.jsx ...

I have the following code how I can make contaniner_contant class closer to background_countainer

in the following code https://codesandbox.io/p/sandbox/layout-page-8gvxls you can see there space between class "contaniner_contant " and class "background_countainer" I'm looking to make class "contaniner_contant " closer to bottom without using position...

Background color changes dimensions ???

Can anyone explain me why thus happens ? Is there something in the tailwind I do not understand :/ When I hover over number 2-6 I change border color to yellow and then the size looks same with number 1 which is active with yellow background. I set container grid grid-cols-[repeat(3,min(50px))] grid-rows-[repeat(2,min(50px))] place-self-center gap-4...
No description

having a scrollbar without setting height

On mobile, when the menu opens, it overflows the screen size. Setting overflow-y: scroll doesnt work unless I set height: 100vh, which I cant do because it still takes effect when the menu is closed (the element is still visible, but not expanded). Is there a solution that doesnt require js?...

confusing info

What does min-width :0; in this exemple really does, looks weird cause it's like including overflow-x :hidden; but instead bro really includes min-width which make no sense thou 🤔
No description

How can I create a submission page?

Hey there I wanted to recreate this "Contact Me" I found but the issue is I don't really understand how it works or what is required in order to achieve this...
No description

Making a paragraph fit it's content

I have a <p> element, which I'd like to add a max width to, and also have text-wrap set to balance. However, applying these properties creates extra space on the right side of the element, which I'd like to get rid of. As you can see in the pen below, I've tried adding width: fit-content, but it doesn't change anything. What should I do to fix this? Here's a pen: https://codepen.io/samalander0/pen/ZEPLjzm...
No description

How to align the header and footer for a page

1. I have page with two sections divided in b.w , if I want the header on the left to have the background-color of black (same as section 1 bg) and header on the right to have the background-color of grey (same as section 2) Need to achieve something like this - 2nd image...
No description

Centering absolute element above relative parent element

Hi! So I've been scratching my head a bit, I'm making a tooltip that is position absolute that I want centered and above when hovering the icons, and the content of the tooltip is of varying length so I cannot set a static number to hack it. This is the code for the tooltip : `.tooltip { position: absolute;...
No description