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

Shadcn default styling issue

Does anyone know why default shadcn styles aren't applying?

Multiple linear-gradient masks

Hey guys, I seem to be unable to add multiple linear gradients to a mask? Anyone who can tell me what I'm doing wrong.
No description

Can't horizontal scroll

Hello guys i have a simple react component, the problem is the "tags" div doesnt go into horizontal overflow it just sticks to the parent's width, i tried so many things but couldnt make it ```tsx "use client"; import { timePassed } from "@/utils"; import Link from "next/link";...

Make height of a scrolling div less than certain height (with calc())

Hey there, am facing this issue where my main div doesn't stay on the certain specified height which should be less than some other element, in this example it should be min-h-[calc(100dvh-2.5rem)], where 2.5rem is height of a navbar located at bottom with fixed position, What I want to achieve is that main div should be scrollable without its bottom content getting overlapped with the navbar The main thing is that it works untill more elements are added where it becomes scrollable A playground will make you understand better - https://play.tailwindcss.com/FchqlK9POr Thanks!...

container and media query alignment

Hey, i have a container query set to execute at 500px, and in another section i want to adjust something at 500px also but using a media query. If i have wrapper pushing the container inwards, the screen will reach 500px before the container. I'd like them to execute at the same time. How would i go about doing this without making a bunch of containers to put on sections? Many thanks.

How to make child of absolute parent be relative to the other parent

I have something like this ```html <div class="relative parent"> <div class="absolute child1"> <div class="absolute child2"></div>...

nesting media queries

Hey, if i'd like something to occur when the viewport width is 640px or above but below 960px, would it be bad practice to nest media queries like this? ```css @media (min-width: 640px) { @media (max-width: 960px) { ......

need help with tailwindcss.

Hello guys ,how can I avoid this text overflow, I have tried text wrap but it isn't working.
No description

Help in responsiveness

Hello everyone i need some help in my project I'm stuck in my header need some help

CSS 3d transformation nullifies hover effect for children elements

--rx and --ry are set dynamically with JS based on the mouse position relative to the container. This is the CSS for the container. --rx: 0;...

Removing Wordpress Sub-header Grey Highlight on Hover

I'm working on a wordpress site that has a theme applied by our university. Most things I've wanted to do I've been able to by using CSS to customize a bit. However, I am having problems getting the menu bar to work the way I want. Essentially I'm using a megamenu that has headers and then subitems within those headers. Wordpress menu does not actually have "headers" that are not links so I essentially created a custom menu item and put # in the item's "link" field. The problem is that this workaround ends up treating the headers as if they are a link and when hovered, the background turns light grey as it does on actual items within the menu. I've been able to get the headers to have the "default" pointer through css but I have not yet succeeded in getting the grey highlight to stop. I've tried several things including "pointer-events: none" but this ends up applying not only to the header but also the items under the header. Any thoughts? Also, I'm only familir with HTML and CSS....

I can't get to switch the player turn.

So I'm doing a tic-tac-toe game with JavaScript. I'm going with the console game first then I'll add the UI. Also, the objective is to have as little global code as possible that's why everything is inside of factories. The thing is that my gameController factory (where I control the game duh) is giving me a problem. I can't get to switch the player turn. The gameBoard is being logged correctly and it works, the problem is that every move is "made" by X player, when after each turn it should be switching. Thanks in advance πŸ™‚ Here's is the Codepen: https://codepen.io/norwyx/pen/gOJOVde?editors=0010 Here's the image so you can see what I'm logging:...
No description

How can I fix this problem with buttons on the scrollbar?

So I made this slider (I am a beginner, its my first time doing it) and I wanted to add arrows to top and bottom of the slider. I used position:sticky; but when I reload the page the up-button creates its own space and starts there until I start to scroll which fixed the problem. How can I fix this? ```css .thumb-container { flex-wrap: wrap; align-content: flex-start; ...
No description

Two column Grid layout, center odd one

So, I know Kevin talked about this in a video, but darned if I can remember which one. I have a 2 column grid layout, and if there is an uneven number of items, I want the last item to center at the bottom. His video talked about it being easier in either grid or flex, but I forget the details. Help? Image of what I have attached, and what I want. ...
No description

Grid issues

Guys i have this grid display: grid; grid-template: "top-bar top-bar top-bar" 64px
"menu sub-menu side" auto
"menu content side" calc(-112px + 100vh) / auto 1fr auto;...

help me with border radius

I don't know how to create an inverted border radius.

React role-based authorization

Hello guys, I hope you are doing great! I would like to ask you about the best practices regards to react role-based authorization using react route dom@latest using 'createBrowserRouter' as well as when it comes to creating component based on role what should be shown and not .. etc if there are some of you have done that before let me see how you made it, Thanks...

Want to create 3d animation for logo which consist of 5 box.

Logo is box type, and I wanted to pop in and out in 3d manner using html css and JavaScript, I have tried but not able to implement that. Anyone can you please help me?
No description

Navbar Bug

I'm trying to make a navbar like this website here -> umbrel.com but when you click on the hamburger menu the navbar seems to go up a little bit, that's my issue Codepen: https://codepen.io/JimKi8/pen/GRaRPjv...

Border radius that spans over several elements?

So I want to create this border effects where the radius is sort of inverted... I tried using ::after elements and flipping one of them but... yea it's not really working out as the border isn't really aligning properly, and the corners have some weird artifacts. How would you approach this? My codepen for reference https://codepen.io/markus-bergman/pen/PovoBdW...
No description