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

Image height

I'm probably being really stupid about this, but I have the following problem (see attached image) It's just a simple image with object-fit: contain on it, but for whatever reason it keeps adding an insane amount of white space to the top and bottom. The amount of white space varies on each different image. All I want it to do is stretch to fit the container, and take whatever height it needs to....
No description

Todo-List (I need my own megathread!) - Creating classes and using DOM

Hey, it's me, your friendly neighbourhood CDL. https://github.com/callum-laing/todo-list As you can see with my current code, when I hit + on Projects, I input text into the field, hit Confirm (tick), and it creates a list item....

aligning svg's with text and creating underlines that don't "chop" at the end due to margins.

It could just be my eyesight, but these SVG's look to not be lining up correctly with my text (also, do you hate the font as much as I do right now?) I'm also wanting to add an underline/border-bottom the Projects, which is fine if I have no margin, but when I add margin it creates gaps at the end.. reason I'm using margin is because the SVG sits right at the very end of the page without anything there to bring it in a little....

Need help with resolving CLS issue

using pagespeed.web.dev to measure my site performance, how do I fix CLS that's happening in my main layout div? How do I find what's causing it??
No description

Mobile Responsive issues on transitioning from desktop to mobile view

I'm running into a slight problem trying to figure out why one of my content area wont repond like the others between 400px to 375px. One of my containers just seems to wont respond at all after i implement css grid 1fr 1fr. https://codepen.io/dellannie/pen/poqjJWW I attached the code here if anyone can take a look thanks in advance...

how to do this animation

Help me how to do this animation for card in react js

Feeling Demotivated :(

Hi, hope all are good, I have been doing pure HTML and CSS for a few months, but when I made things, I dont understand how to make it or take days to make a single thing, like recently I make responsive nav bar for first time(first two times I copy from internet to understand how it works and then new design of nav), it took me around a day, which feels me bad, is it natural? How could I overcome this? Thanks, Hamza N....

Background Color Disappears when hovering on the eye icon

Hi, I am having trouble keeping the Blue background color while pointing the cursor on the eye icon. I do not understand why this happens I've tried different techniques to make it work but no progress so far. Codepen: https://codepen.io/kiz1/pen/GRPgvWa?editors=1100...
No description

Why should i not use `()=> {}` on components elements like `onChange` or `onClick` in React?

I remember of another dev talking it to me, that things like: <button onClick={() => something} was a really bad thing, but i don't remember why or if it's true that is bad for the project or dev experience...

Overlapping gallery

Hello can somene explain how to make something like on the img i try to do with grid but cant understand how to do it can someone explain or send video how i can learn how to do it pls?
No description

CSS Custom Properties

Can somebody help me understand why these custom properties wont work. ```:root{ /* Primary Colors */ --cta-main-clor: hsl(71, 73%, 54%) --text-color: hsl(179, 62%, 43%)...

Scoll issues with sticky nav bar and hero image

I am creating a website for my band: https://denounced-disgraced-git-feat-press-kit-updates-markmullins95.vercel.app/press When the content scrolls, it is visible under the navbar. I want it to cut off when it goes beneath the navbar. Also, I tried adding a margin / padding to the content in the div that contains the content, (class "sc-9caaeffa-1 gRLorz" in this case) and for some reason only margin left works at smaller screen sizes. I believe this is because of width: 100% but I am not sure....

Video not getting the full height

Hello, I have a video that needs to cover the full size of its parent but it is not happening and I don't understand why. Is there a CSS property that I can use to achieve that?
No description

Question regarding TailwindCSS

Hello guys, can anyone tell me why are my custom colors not working although I did write them in the config file, and I also triple checked for spelling but still ...

Where buy domain?

I want buy domain - where I can do this? - give me the best sites I want become quality I ready to join your referal link if I get something form it...

Navbar toggle icon should close

Need help with this why my sticky navbar toggle icon is not closing i think its due to its sticky position when i remove sticky position it moves to the section but remained opened i want it to be close when i click on navbar item "https://talhamustafa1.github.io/proxi5/#

How to remove Label bubbling

i want to know how to hidden the label notification(in image) and i want to use text by js instead it. thank you.
No description

css responsiveness overlay

Hi! im currently working on a school project but i need some help regarding the responsiveness on one of my page overlays. I tried looking at Kevin's yt video ( https://www.youtube.com/watch?v=uuluAyw9AI0&ab_channel=KevinPowell ).
I need some help figuring out how i can make it work on a physical mobile screen or what i have done wrong, as it works in the f12 menu in chrome. I'll attach the files its regarding below....
No description

Navbar Problem

When I click on toggle button, I want the nav items in center, below the logo, how could be done here? https://codepen.io/hamzacodepen951/pen/BavNWKE...

Accessibility Components

I have been seeing things like aria-label, role, aria-labelledby for some time now but recently showed interest in learning it for accessibility reasons, but I need resources to learn them properly. I have only have faint idea about them, really. Anyone willing to help me?