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

JavaScript Array Question

why is this array not showing the information of itself
No description

article or section element?

I'm not sure whether each of the 3 parts in this card component should be made with the <section/> or <article/> tags. I know that article tags should be independent and make sense on their own and I think each part of the card does make sense on it's own, but at the same time section elements contain thematically related content, and these 3 "sections" are related. So should I use <article/> or <section/>?...
No description

How do I prevent my layout on breaking on big/very wide screen sizes?

This is the webpage: https://gymlie.vercel.app/dashboard The problem Opening the website on super wide or big monitors can cause the site to act super weird and for the content inside of the elements to jump out of place...
No description

How to disable scrolling on the x-axis.

Basically, I've tried everything and haven't been able to disable the scrolling that is happening on the x-axis on this landing page, I will provide the GitHub repo if anyone can figure out what I'm doing wrong, I will be very thankful. https://github.com/nair0501/Minimalistic-website...

React JS vs Svelte

what do you guys think about that does Svelte Worth it or not cause in my way to learn React js Im really confused by the amount of detail it contains
No description

REACT component in need of dynamic div height for animation

Hello! I am having an issue animating a conditionally rendered component in my Next.js project. I am trying to animate the height of a <div> to zero. If I don't have a set height and want it to be dynamic based on the content in the <div>, is there a unit that would work for this? Here is a link to a Gist for better reference: https://gist.github.com/egnica/e871db3612b00e228b00995d4f57a029...

Border radius and backgrounds

So this is a fairly common question. If you have an element that has a border-radius and then a child within that which has a background this will not overflow the parent's border radius. As the image shows, there's no curves on the top corners. The common answer is add overflow: hidden to the parent. And that works....
No description

Moving Elements in a Sticky Header

I have a header that has two rows of content. When the user scrolls down the page, I want to collapse the second row and then move the search bar and Component B up to the first row. Is this possible with CSS only? If not, what I'll probably do is just add them in both rows and then show/hide them depending on if the header is collapsed. CodePen: https://codepen.io/mandy-h/pen/qBGVpxK...

Feed layout css

Hey, Would you have an idea of whether it's achievable to go from the first screenshot (a mobile view) to the second (a desktop view) without media queries? In short, the border bottom on the first view is 100% of the viewport width, while on the second, the border is the width of the content....
No description

Custom Hover shape

Hey everyone 😃
Can anyone link me to a tutorial or what I should be researching to learn about how to do hover effects like this? https://milknetwork.com/...

Adding whitespace to beginning of a broken line

Is it possible to add a space to the beginning of a new line the way whitespace: pre-wrap preserves the whitespace at the end of the line?
No description

Which Html element should be used?

I'm trying to code this for practice but I have no idea on how to go about it. The two images contains the desktop and mobile view. Do I use tables? Divs? I have no idea. Thanks in advance....
No description

css question

how can i make border boxes the same size? css
No description

small space left at the bottom for the img

If i set the height of the img to 100% the size becomes too big. any other approach?...
No description

Stripe payment gateway

Can i integrate stripe payment gateway to my html ,css and js website??

i can't make this paragraph responsive

the .intro2 is parent and .para is child , my paragraph is overflowing and it's look awful, i am a newbie and idk abut responsivess that much can someone help me to fix this.
No description

background individual property not working similar to background shorthand

background:
radial-gradient(farthest-side,#ffa516 94%,#0000) top/8px 8px no-repeat,
conic-gradient(#0000 30%,#ffa516);
background:
radial-gradient(farthest-side,#ffa516 94%,#0000) top/8px 8px no-repeat,
conic-gradient(#0000 30%,#ffa516);
...

Centering a div

Hello, I'm having a hard time centering this overflowing div. https://codepen.io/Suggon/pen/wvbrRqa?editors=1100 Is there a specific property that can help achieve this? (please note that the inset-based centering is important for my usecase)...
No description