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
Ssnxxwyy5/12/2024

can't highlight text from pseudo element

Hey, i have a heading class that displays a caption underneath it with the text being what's provided in a data attribute. It doesn't let me highlight this text with my cursor though, does anyone know why? Many thanks https://codepen.io/deerCabin/pen/mdYyLdr...
ZZorrle0015/12/2024

DisneyPlus Sliders

Hey, I was wondering how the DisneyPlus Content Sliders work on the Startpage. Previously it was a flex box with the Video Covers as Childs that were moved in the parent with a transform. But now i can’t figure out how theese new content sliders work. Maybe it has something to do with scroll snapping but i am not sure. I would be glad if someone could help me πŸ˜„...
No description
βˆ‚Ξ±Ξ·Ρ‚Ρ”5/12/2024

Shadcn default styling issue

Does anyone know why default shadcn styles aren't applying?
AπŸŒŸπŸ¦‹AmeliaπŸ’œπŸŒΈ5/12/2024

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
KAKryp Arnold5/12/2024

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";...
SSheldonFromBBT5/12/2024

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!...
Ssnxxwyy5/11/2024

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.
BBardacoon5/11/2024

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>...
Ssnxxwyy5/11/2024

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) { ......
XXenon5/11/2024

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
FBFahad Baloch5/11/2024

Help in responsiveness

Hello everyone i need some help in my project I'm stuck in my header need some help
MMatei5/11/2024

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;...
TTin5/11/2024

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....
JJonathan5/11/2024

Needing to make nav menu to do 2 things Hamburger, infinite rotation

I have tried to make the nav bar to turn into a hamburger menu and then trying to make an infinite scroll out of it. I put 4 attachments, first two attachments are .css...
No description
NNorwyx5/11/2024

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
Iisikmert5/10/2024

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
RRick5/10/2024

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
Rroycube.5/10/2024

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;...
HHUGGBUBB5/10/2024

help me with border radius

I don't know how to create an inverted border radius.
Mmirox5/10/2024

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