KPC

Kevin Powell - Community

A friendly place for developers to meet other devs, ask questions, get help, and just have a good time 🙂.

Join

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

The Internet's own Kiddo

11/3/2023

Issue with positioning ::before pseudo-element behind the main element

'm having an issue with CSS styles for an element with the class .vision-card and its ::before pseudo-element. I'm trying to hide the pseudo-element behind the main element using z-index: -1;, but it doesn't seem to be working. Here are my styles: https://codepen.io/jackyiakovenko/pen/KKJgobr?editors=1100...

Light

11/3/2023

Help with expanding layout

So I'm trying to create a layout where the first element has a minimum width, and then it'll try to fit as many additional elements before starting a new line. I've attached a CodePen to help with this idea. https://codepen.io/elad-karni/pen/oNmLBGz...

Jus Sus || 💀

11/3/2023

Resizing issue

https://codepen.io/stressunfit/pen/NWoROgx?editors=1111 I am not able to figure out why resizing isnt working properly when i try to resize with any handle expect bottom right handle. Bottom right handle works fine. Any kind of help we be greatly appreciated. Thank you......

Bless😇

11/3/2023

Postcss @import not returning content of the files.

My output file returns '@import 'files'' instead of the content of the files. I don't know what I'm doing wrong. I've tried changing files paths, still getting same output. But when I link 'main.css' to my html head, the content in the file reflects on my work. postcss.conf.js - module.export = { plugins: [...

RaviTeja

11/3/2023

How to design performance meter

Hi , am trying to figure out on how to design a component , which shows performance meter based on value given. The meter color goes with gradient . please guide me !...

Jus Sus || 💀

11/3/2023

How to achieve this using HTML Canvas

Hi, i have been trying to be a canva like application using vanilla js (no libraries). right now i am working on adding texts to the canvas. What approach should i follow to achieve this : https://www.veed.io/view/f6da6b9d-6dc7-4ea7-aa1a-786579e26215?panel=share

syg

11/3/2023

how do I handle IMG srcset and widths together?

Lighthouse is yelling at me to add widths to my images where I use srcset, doesn't this negate srcset and constrain the width to the width attributes value in pixels? How are you supposed to use these together?

! nier

11/2/2023

Flex container issue

Hi, I have a problem with a flex container info-cards with flex-wrap active. The container has 3 cards that by default are on the same row, but if the vw gets too small they break in other rows. The problem is that when this happens the width of the container keeps on being 100% while I'd need it to just fit its content so that it can stay horizontally centered. I can fix it using media queries but I'd rather have a cleaner code. Here's the codepen: https://codepen.io/uzhas/pen/gOqwXGm

CDL

11/2/2023

TOP - CV Application - Some guidance on setting this layout up

Layouts haunt me, I always mess them up, so this time I'm coming for a little guidance first 😛 Firstly - admire my amazing paint skills. Secondly - what's a better idea, having a dropdown menu to then reveal the inputs, or just show the inputs from the get-go? Thirdly - how would you build this layout? my initial thought was grid. Have 3 areas/cards down the left, then a large card on the right with a 30/70 split? or is flex perfectly fine? I really don't know....

Psyzen

11/2/2023

How to show first 3 items in the browser ?

I want it to be like in the image. Im not sure how to make it so that the third item is like first 2 items and when scrolling it scroll one item at a time. I didn't tried to impement javascript functionality yet because I struggle with css. I tried to do with grids and flex but the third element bottom is always behind and I want to see 3 items with margin of 2em and row-gap of 2 em....

Anil

11/2/2023

Require Animation on scroll up/down.

Hello guys can you suggest a good library or other trick to achieve one animation. Animation will work like, on scroll up parts of the objects will moves to up. And on scroll down moves to down. Let’s think object like watch and parts of the watch is moving up and down....

Cortezano

11/2/2023

:root gradient color issue

Hello everyone, I'm creating test project to test my skills from the scratch, and I try the root gradient color but when applying this color can show in my website, can you help me guys whats wrong in my gradient code https://codepen.io/Cortezano/pen/VwgKWJp btw, I'm testing it in the nav-bar-section with the gradient color just to see if I can do it, but it doesn't really work,...

anon-pradip

11/2/2023

flickering on hover

when I hover at the bottom of the floating div, the floating div moves up due to translate propert but after like 1 second being the mouse cursor at the same position, the floating div comes to initial position. why is this happening? <div class="main"> <a class="card"> <div class="floating"> ...

Boeroe

11/2/2023

Need some help with my form

Hi guys anyone got an idea why my form is not getting the result it has in the picture, text area is not getting how it should be My code: https://codepen.io/Boeroe/pen/oNmzBBg...

Abrar

11/2/2023

useContext react

import React from 'react' import ReactDOM from 'react-dom' import { useContext } from 'react' const konteks = React.createContext(null);...

Igor Milenkovic

11/2/2023

CSS challenge - grid/flex fill space

Hey everyone! 👋 I've stumbled upon an interesting CSS challenge. I've attached an image showing the desired look. If any CSS wizards have some time and would like to give it a shot, I'd greatly appreciate any insights or advice. Thanks in advance! 🙏...

Jus Sus || 💀

11/2/2023

HTML Canvas flickering

Hi i am trying to build a editing application like canva. right now i added functionality of image adding, resizing and dragging: https://www.veed.io/view/7867c461-0e4a-47b8-b0d0-b498ccc8d67f?panel=share. When i make any of dragging or resizing or even selecting an element on the canvas. the canvas flickers. I think this is because of frequent draw on canvas. How to avoid it.?

i_lost_to_loba_kreygasm

11/2/2023

How can I do this layout with grid ? Anybody can guide me ?

popopo

11/2/2023

Freelance web developer day rates in USA?

what are usual day rates for wordpress web devs?

Nash

11/2/2023

Typescript type for array passed as string

I'm trying to convert a comma-separated string(knowing the possible variations) to an array using each element of the array as key of a dictionary of icons. Does anybody knows how to do this? const Iconos = {...

Previous Next

Gaming

Programming

Kevin Powell - Community

A friendly place for developers to meet other devs, ask questions, get help, and just have a good time 🙂.

Kevin Powell - Community

A friendly place for developers to meet other devs, ask questions, get help, and just have a good time 🙂.