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

Button Gradient Background State Transitions

I discovered @Kevin Powell's YouTube channel this past weekend and binged a bunch of videos. One of them gave me a hint about something I've been trying to achieve for a while: buttons with a gradient background that changes with element state (default/hover/active). I made a CodePen to demonstrate: https://codepen.io/Caraes_Naur/pen/ByBOdKL The Pen shows my current implementation using pseudo elements and an improved version using custom properties. It also describes the new approach's advantages and some remaining issues with it....

Grid problem

Hello, On my site when too much text goes into a cel the other got extra spaces . Only the "partnership" and "family" can get too much datas. How can I fix it without scroll thet two cell? --Link deleted: personal data--...
No description

When you write media queries

When you write media queries do you make it so that it is responsve through and through as you shrink the browser, or only responive at certain break points?

How to handle position absolute elements for all responsive screens?

I have been working in a react project that hase few pages like Home, Services, About, Contact and Career , each page contains a couple of position absolute elements. I used tailwindcss for styling. and started as mobile first , I used Responsive viewer for responsive check while development, I selected 3 devices for this (iphone 14 pro, ipad mini, macbook air) . So i positioned the absolute elements...

The Eagle extension is not woking

The Eagle extension is not woking in different browsers, i'm using ubuntu, please how do i fix this

Designing for Information-Intensive Website

Hi. I am building a hunormous, informatin-intensive website, and truggling how to make it work on mobile. The website has 5 content-based "sections", and I have come up with a "template" - for each section - which includes maybe 10-12 "sub-sections". A generic example would be having a section called "Business", and then it would have things like......

flex wrap

Hi guys I am having trouble making my subheading on my website it has 10 <ul> lists in a div containing words but i cant seem to find away to make it responsive on window resizing. It just seems to overflow no matter what! I have attached some code and pictures on this any help is appreciated. Thanks! =======HTML========= import React from "react";...
No description

Flex Center problem (can someone help me please?)

Hello, I have images. It could be 1, 2, 3, ....30 images. I would like to center the images. When the images are overflow I would like to use scroll. My problem is when the images are more than with I cannot see the first ones....

Hide popover on same document link navigation

I have the following popover menu, clicking on a link will not hide the popover: ```html <nav id="mobile-nav" popover> <a popovertarget="mobile-nav" popovertargetaction="hide" href="/">Home</a> <a popovertarget="mobile-nav" href="/#products">Products</a>...

How do people degug overflowing elements that overflow other elements?

I have an overflowing element but can't narrow down the culprit, does anyone have a method they use to identify which element is actually overflowing everything
No description

Using only areas template areas with z index

Good day
Please how can I using grid template areas with z index...
No description

How can I achieve this design in the hero section and have it responsive

I am a frontend developer and I have always admired the hero section design (on the left and right) l, the email, blog, website etc sections. I cannot think of a way to have it look like this on desktop and have it responsive for all screens. I usually style using TailwindCSS Would really appreciate all the help on how to achieve this...
No description

Grid question

Hello, I created to my mom a family tree website. It have a grid layout. Under 700px born, death, partnership, family going under each other: ```.born {...
No description

What's the best way to style 45 bevel corners?

Tried a few ways, but they mostly seem like hacks. Solution should achieve the following results: - consistent border width, even along angled corner - require only one div/class (no inner+outer containers) - use either the outline or border attribute...
No description

animation on every click

I am trying to create an animation for every dice roll, but it only occurs once and then stops. How can I fix this? https://codepen.io/etrbbr/pen/azoKQrx...

Font behaving different in browser

The same font family with the same size, and same height but renders different, one is in Figma, and second is in the browser
No description