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

help

Is `min-width` necessary or best practice for containers?

Hi community, I have this situation where I have a page that has a single card with content inside. As I learned in CRL course, I set its width with width: min(90%, 24rem);, which in all honesty I like how it works. However, someone elsewhere recommended me to set a min-width because as they showed me using responsive mode of the browser in like less than 200px viewport width is too squishy and gets all broken (which yeah it's true of course)....

Aligning icons (fontawesome)

I want to align the icon to the text, but it seems difficult. I tried vertical-align: middle, but the position of the icon is not very middle. I suppose it's due to the height of CJK characters?
No description

the animated text doesn't follow the flow of H1

i have an issue with the animated text; basically it doesn't follow the h1 flow, what i want to do is make an animation that's infinitely scrollable; https://codesandbox.io/p/sandbox/fnlkxd (start from line 115 in main.css) ...

More elegant fit for elements auto stacking than grid-template-columns: repeat(auto-fit, n);

As you can see on the pictures, that empty space is eventually created on certain screen sizes that look super ugly. Any more dynamic and elegant ides where cards will fill up all the space and eventually stack like in the picture, outside of hard codding it for each screen size? CSS code: ```css display: grid;...
No description

CSS Grid question (first row with 3 columns, second row with 4 columns)

Is there any easy way to set this up without having to declare strange spans? Or making the grid be 12 columns.

Angular Course

I know there's Maximilian's angular course but I was wondering is there a course out there that has also more exercises in it so you can also practice as you are going through it. His course doesn't seem to have that many exercises

Getting started with Javascript

I am currently learning responsive web design and "mobile-first" development, and it looks like I need to finally break down and learn Javascript. My approach to learning new languages is to learn the pure language before getting off into the weeds learning frameworks and so on. Is it possible to learn just Javascript?...

Custom Kuromi Shaped Buttons

Hey I wanted to know if its possible to create custom buttons like these with CSS only. Its been a while since I've used css and I've forgotten quite alot. I was trying to make this "Kuromi Calculator App" with a hidden chat in it for my sister's birthday gift, Wanted to know if those buttons are possible, talking about the ones with the custom head shape, not the heart shaped ones.
No description

Lining a button up alongside text

Can anyone tell me how to get this button beside the word "you". I have tried Flexbox and margin. I have tried putting the button in its own div. I have tried placing the button in the same div, but it hangs lower than the word "you" and even with margin it will not move. https://github.com/FantasticalEmbrace/docuseal-mobile-notary/tree/main...

nesting css. what did i do wrong ?

hi all, i'm trying to toggle a edition using css. in "display mode" : i need to display labels of checked inputs (ok) in "edition mode" : i need to display everything (not ok) this only thing happening when toggleling edition, is the "switch" of the buttons modify/save...

How to mask multiple boxes over one gradient?

I've designed this in Figma, placed one gradient behind multiple boxes, couldn't find a right way to implement this in CSS, please help me.
No description

Why is there like 1 percent difference between the HTML CSS version and the Figma design?

Hello good folks, I have completed my second FEM challenge and for my first and second solution there's like a 1 percent difference between the actual design and my solution. why do you think that is? I am using exact same values for everything, down to the last pixel.

How To Type A Clone Function?

I'm working on my very first Svelte app, and, because I can't use JSX, I'm currently trying to get Wunderbaum working to do a tree grid. (It would be really nice if it used the actual CSS grid layout to display itself rather than fixed width columns in pixels, but it don't, and it doesn't bother me enough to write an alternative. 😸) Anywho, my program is getting a FileSystemDirectoryHandle from window.showDirectoryPicker(), and recursively spidering that directory into a Wunderbaum tree for review before generating an IPFS CAR archive from whatever files the user selects. The problem is Wunderbaum mutates the input data structure in such a way I can't use it to generate the CAR file. So, one approach I was considering was to copy the input before sending it to Wunderbaum. The problem is it contains FileSystemFileHandles for all the files in the tree, & those can't be cloned, so I came up with:...
No description

margin-top: auto does not work inside a element

Hi guys, I have an a tag which wrap some div element and I want to place the last div at the bottom of the a tag. I'm using margin-top: auto but it does not work. How can I handle this problem?

how can i put curves little above ?

i tried everything and margin -1em worked but i don't know if it's a right way to do it ?
No description

How to increase the duration of pseudo classes in CSS?

Hey! I'm looking to increase the duration that a button remains active after being clicked, so the effect doesn't disappear immediately. I've developed an approach that works well with just two states, but I want to ensure that the delay applies only to the active state and not to the others. For instance, I want the hover state to be immediate, without any delay ```html <!DOCTYPE html> <html lang="en">...

Can we use the DOMContentLoaded event inside an async function?

Hello guys, sorry to disturb you all; I tried to use the DOMContentLoaded event in an async function but it seems that the event isn't being executed, is there a reason for that please

inverse width in relation of the viewport

i want to grow an image based on the vw the bigger the screen, the smaller the icons until they reach a certain vw (100vw) and if the screen is smaller (1440px & lower) the img width increases...

Navigation menu has been broken

Hello. I'm redisigning my websites and I've came into a brickwall full speed while designing my main navigation menu. If you look at the screenshot, it shows the menu as a standard <ul> list, and not like a navigation menu on a single line with the links being buttons. This is the CSS responsible for the navigation styling: ```css .menu-main {...
No description

Faced a little problem following a tutorial

I was following "Creating a Blog Site" tutorial at this timestamp => https://youtu.be/Thudicbgqtg?t=4678 Github repo link => https://github.com/asmkhalid111/Blog-Site I have upload an image of the problem output i was facing. I have also added the github repo where you can see a portion of the code. ...
No description