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

I need help on making website scroll timeline

I'm trying to achieve a timeline that goes till the end of all the days when It comes nearly to the center of the screen but after a period of time it sadly starts to appear much later which leads to the last one appearing nearly at the top of the screen so what can I do to fix this? ```css .timeline-bar { content: " ";...
No description

grid-row-columns: image overflowing out of grid item in grid layout.

Hello everyone. I am trying to create a grid layout that shows 3 columns vertically and than 3 columns horizontally using grid-template-rows. I don't want to achieve this using the auto-fit or auto-fill attributes with grid-template-column. I want to be able to define the height of my rows within the grid layout. The issue is that my image keeps flowing out the bottom. I can't understand why this is happening or a solution. Any ideas? I am coding in react. Code sandbox: https://codesandbox.io/p...
No description

Sass (scss), PostCSS or plain CSS for a component library using React?

As the title says, how should I handle CSS? Is there a really bad reason using just plain CSS for a component library? I want to go plain CSS as much as I can and right off the bat, I can't think of a really bad reason to just use plain CSS....

how to create this type of grid effect

no, it's not attached to the image that's a separate layer, how do I achieve this effect with JS
No description

Migrating SCSS Imports to Use/Forward: Handling Shared Variables

question should be like, i wanted to update my sass and remove the warning for import since its deprecating. this is how my structure is. ...

Playground in SVG

I have an SVG playground where users can add components and connect them using poles and wires. I need to implement a functionality that allows users to manipulate the wire. Specifically, they should be able to adjust the wire, as shown in the second image, where they can move the middle of the wire to make it more organized. How can I achieve this? I'm using only HTML, CSS, and JavaScript....
No description

how to make the grid items not grow based on the parent's sibling

i have a small issue? how can i make my grid items doesn't get affected by the sibling's height...
No description

Inward border-radius on the bottom right of a container

I want my container to look like the one in the image. I'm also aware that Kevin made a video regarding this
No description

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