KPC

Kevin Powell - Community

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

Join

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

help

JWode

3/2/2023

Click MouseEvent not bubbling

Maybe it's not bubbling? Maybe it is? I'm not 100% sure, but it doesn't look like it and I can't seem to work out why 🤷‍♂️ ``` const clickEvent = new MouseEvent("click", { "bubbles": true,...

Tenkes

3/2/2023

Getting 404 error with font-faces even with correct file path

I've followed Kevin's tutorial on how to sefl-host fonts using @font-face (https://www.youtube.com/watch?v=zK-yy6C2Nck&list=WL&index=19) but I ran into a problem. When I declare @font-face (with 100% correct file path) I get 404 error in browser. And I'm sure file path is correct because I can Ctrl + Click on it and it takes me to that file My file/folder structure: ```...

Peacock Plume

3/2/2023

Cloning Google Font's Light/Dark Mode Toggle

I was following along with this one, not really being a tutorial, but there are certainly things to learn in this video, anyway. I was doing this for fun on a HUGO website I'm playing with. And I pretty much cloned what Kevin did, but I can't get the browser to remember my prefers-color-sheme, no matter what I do it will always switch to dark, which I am using as the main theme for the site. And I've checked all instances of it that I have set up with Hugo in css and golang html. I don't seem to have done anything different than Kevin. The only thing is that I'm on a pretty old 2013 Macbook Pro running OSX 10.14.6. On chrome and yes, everything on this system is themed dark. Google fonts does recognize my preference, so theirs kind of seems to work. Any clues/ ideas as to what might be causing this for me would be great....

Avinash

3/2/2023

How to reduce width of a div without hard coding values? the only element it contains is a image

As you can see in the image the parent component has display:flex, jcc, aic properties. parents has two child divs one containing ul and other is image. the original image is of diff size so i used width:20% on img, the size of the image is reduced but the div surrounding is not reducing in width. how to fix it? https://codepen.io/avinash-tallapaneni/pen/ExRomwX...

dys 🐙

3/1/2023

How to theme when using CSS modules?

So, I'm currently working on a pitch to dig deep into the guts of https://metagame.wtf and tear out all the Chakra UI. Replace it instead with semantic HTML & class and id-based matched CSS modules as parsed by whatever. The visual appearance of the page is contained solely in external CSS files, the structural appearance in the markup....

Grant

3/1/2023

How to make a fancy border

Hello, I'm looking for advise on how I might achieve the border attached in the image. In case it doesn't display very well. Its a dashed border, but has little squares placed in corner. Pretty confident there is a CSS solution to this. So the dashed line is simple enough, and I know I have the before and after pseudo ready to be used....

samidev

3/1/2023

Can somebody create this for me in responsive way, i've tried but i couldn't do it

Cahnis

3/1/2023

How to style a selector's height based on the height of the selector that is being hovered?

Hello friends, first time poster. A friend I know brought a JS solution to a problem that I think can be solved with CSS. But I just can't put my finger on it. The component is the one under "Qualify self-employed borrowers in seconds." at this website: https://baleensolutions.com/ ...

Daryl M

3/1/2023

Button gradient background missing on mouseover

https://codepen.io/dmtractic/pen/eYLvmdg This button has a pseudo-element :before. This is being used only for the gradient stroke. When you mouseover the button, it seems like the pseudo-element overlaps the main background of the button even it has z-index: -1 style....

Mert Efe

3/1/2023

Unable to make headless ui component get rid of table overflow/cutoff

message.txt

Kiran

3/1/2023

Alert the user if they are using older version of chrome , edge ?

Hi Which is the best way to alert the users if they are using the older version of the chrome or safari ? I think by using the older versions of browsers they are not able to access few components. this is due to older versions or some other issues (like based on React Version they are not working or due to some npm packages etc. )if it is browser then what approach can i follow and alert the user to update the chrome or safari ?...

Aozen

2/28/2023

for some reason paint-order is not working on chrome but https://caniuse.com/?search=paint-order

it says it is supported on https://caniuse.com/?search=paint-order but it's not working on text

Å Marlon G

2/28/2023

When use "use strict"

Hello... First time coding in JS. Cam across this: https://javascript.info/strict-mode Does this mean that I always have to put "use strict" at the top, or only if there is old JS to be implemented along side new?...

beans

2/28/2023

why does an image spill out of a container even with padding on the container set?

just a general question on why something like this happens

beans

2/28/2023

Can someone explain to me how clamp() works?

and how can it be used for responsive fluid text

ronyshahab

2/28/2023

How to focus on coding?

My friends often call me for valorant and stuff and it would be just be a excuse to say that because of that I can't focus. But the thing remain same, Even after deleteing the game , it is still hard to focus on coding. Should I just stop watching anime and all sort of distraction ? I still Don't Know How to focus in coding.

Avinash

2/28/2023

main container should be 90% of the screen size

should i give % values for main container and work there or it will fit accordingly when i add all elements

AllaN

2/28/2023

Dropdown menu on click using only CSS without any JS or other scripts.

Hello Kevin and all the lovely member, I am facing a challenge to create a menu clickable and not hover using only CSS. This is 1st time asking a query I dont know if its the right channel to post if its not please guide me where to post. My code:...

Å Marlon G

2/28/2023

JS – why is it printing?

Hi! Just taking my first babysteps into JS with codecademy. Could someone tell me why the else statement prints in this example when the runnersAge is set to anything except 18? ...

HansM

2/28/2023

grid minmax the f...?

I want something very simple I think... 2 rows, 2 columns, left column spans both rows, right upper should be auto height but 50% max (that's the problem), right lower should take up the rest. When I do grid-template-rows: auto 1fr; the first row is only as big as it needs to, but when I try minmax(0,50%) 1fr; (or any other combination of units I can think of) the first row is always 50%. Why? How can I get the auto height behavior of the first row but with 50% max?...

Previous Next

Gaming

Programming

Kevin Powell - Community

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

Kevin Powell - Community

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