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

help

underline a link

Hi everyone I'm trying since some days to add underline animation on a link I get this (Picture)...

Unordered list items with span, img and a div tag. How to make image of all li align vertically?

I want to image to vertically align, rightnow it depends on the span on the left side(city names). Any ideas?

How to add Text and background image next to text

Hello, everyone, I have issue here, I need to create button, using <a> tag, and I need to add icon at the end of text, i cannot use font awesome icon, I should use only png file that too using css background image property. I added output file how it should look like, I tried few options, but image is not displaying in the browser, ...

CSS grid grow columns if rest are empty

so I had this previously done with flex but now I moved to grid in case I need to overflow to another row. ```css grid-template-columns: repeat(20, auto); display: grid;...

can somebody help me make this responsive please

code is in this link: https://codepen.io/ssamimustafa/pen/ExemrgE please somebody help me make it responsive...

Is using button's onClick callback to navigate is a semantically correct?

Like in the title. Is calling
<button onClick={() => nav("/subpage")}>Btn</button>
<button onClick={() => nav("/subpage")}>Btn</button>
...

Create a transparence

Hi everyone can I get some ideas about the nice effect of transparence on top the video on this website:...

Simple JS operand

I got curious about something, but, let's present the following case: ```js let a = 2; let b = 5; ...

Dynamic height: scrolling an element of unknown height into/out of view

I have a page for mobile that should dynamically adjust to the users device. There is a box that I'd like to have outside of the default view and that should scroll the entire page down when coming into view. How can I best approach this problem? One thought is that the entire content could be wrapped and then shifted up/down the height of the afore mentioned box. But that requires the parent to "know" the dynamically set height of a child, which seems bad/ impossible? ...

Parent props render when theme changes

Hi, I want to change the props based on the toggle theme of website. But I dont know why my parents props not updating when the theme changes. Code here https://codesandbox.io/s/sharp-lamarr-hzpcdr?file=/src/App.tsx...

How to pass react props in css??

How to create that splash effect under the cards using tailwind css

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,...

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: ```...

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....

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...

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....

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....

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