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

Need to make the text responsive

How do I make the image and text responsive to the image so that it is always on the strips
No description

can someone give me the html code for the video "Incredible scroll-based animations with CSS-only"

I need the source code as im not able to get the same animation, my header image animation isnt working properly

Force Overflow Scrollbar to be visible on mobile

Using dev tools, the scroll bar is visible. However, on iPhone safari, the scroll bar is only visible when sliding on the element. How can I force that the scroll bar is shown on mobile?
No description

Not able to Scroll on Scroll Area that has full width

So I'm building a popup reader like this for my RSS Reader app and I'm having an issue with not being able to Scroll on the <ScrollArea /> component in the Carousel dispute it says it has the proper height in the computed tab. Does anyone know why I might not be able to scroll on it? Stripped Code: ```tsx import Carousel from "nuka-carousel";...
No description

Image dimensions not matching p

I randomly downloaded these images from the web and i made 3 cards in a grid. When i rendered it the images came out so misshapen and i dont understand why, and this always happens. Here is the html and css, i have also started using bootstrap so idk if thats part of the problem. ```html <div class="productsContainer"> <div class="card my-5"> ...
No description

Looking for some tips/tricks to use Svelte animations/transitions for either page load, or scroll

Looking to jazz up the portfolio a bit but don't want to over-do it. At the moment I only seem to have fly working well, but I can't just use that for the entire page 🤣 https://github.com/callum-laing/portfolio-v4...

`display: contents` on `<details>`?

https://codepen.io/zachjensz/pen/rNbwOdV I would like to be able to stylistically hide a details element but it doesn't seem to be possible...

image rendering blur when scaling.

Hello, could anybody give me a tip on how to avoid image blurring when it scaled up, So I have my image in a container, and I put transform: scale (103%) when hovered to the container, the image has width and height 100%, so it fills up the container when I hover over it and the container the images scale up, but it blurs during the transition, and I have .6s ease-in and out aswell, I tried to upload code pen but keeps giving error trying to host image. Thank you. .container--scale-1{ padding: 5em 5em; position: relative;...

Fixing overflow issues in nested components of NextJS

On the test page of this demo, the div with Hello Worlds should have vertical scrolling. However, the scrolling appears for the entire page instead. https://stackblitz.com/edit/stackblitz-starters-l38e7q?file=app%2Fpage.tsx,app%2Ftest%2Fpage.tsx...

How to create buttons with torn | distressed paper edges effect? (old paper edges look)

I am excited to this one!, I tried searching about this. I want to make button something like in below examples sites. Please anyone can teach me how to do that?
Card edges | Container edge (https://www.seaofthieves.com)

I want my div (table) to take the entire remaining height of the screen without overflowing.

<div>unknown height</div>
<div>should take all remaining vertical space</div>
<div>unknown height</div>
<div>should take all remaining vertical space</div>
If it matters, I am using JS with tailwind. Another thing to note is that the second div is a table....

Responsiveness query

Hey, How would you structure this box at the bottom of the hero? currently made it absolute and translate: 50%. this is not working out for other hero sections as content is increasing and decreasing....
No description

Boxes Changes When a Character is clicked

How can I make the boxes change colour when a character is entererd? (e.g. When "/" is clicked, the box turns green?)
No description

Full height hero section with navbar

What would be the best way to design a hero section that, together with the navbar, takes the entire page height? Im thinking about doing it by explicitly sizing the navbar, and using calc to subtract from 100vh of the hero section height, would this work? I don't know how i feel about explicitly sizing the navbar height...

My grid elements are multiplying by 10 and I can't find the reason

When the user uses the slider, the currentSize variable changes successfully (I have been console.logging like crazy) but then when the grid reloads, shit hits the fan and It does generate but it multiplies by 10, that is, if the user picks 1 as their grid size, they 10 squares instead of just 1. If they pick 2, instead of a 2X2 grid (4 squares) they get 20. The thing is, the createGrid function is working correctly. When you call it by itself, it works no problem. This just happens when the user slides. Here's the link to the codepen. Thanks in advance (btw the grid elements borders are just decorative, so we can see stuff is working properly) https://codepen.io/norwyx/pen/MWRmzza...

Remove margin on top of column 2

There is a div container with text that has 2 columns at sufficient widths. I don't want orphans on the second column so I set ``` .intro p { margin-top: 0; text-align: left;...

Problem with toast animation (how to make old one slide back?)

I created this codepen https://codepen.io/Lko3001/pen/mdgmKaW, as you can see, when you create a few toasts, and then create a new one, the new one appears out of nowhere and most importantly, the other cards jump up and then down, instead, I want the current cards to slide back, and then add a new card, how do I do that?
No description

Form Validation working weirdly

Hi there, I make this validation but when I play with it by changing the inputs, it is performing weirdly, I tried to find the problem but could not, could anyone please help me to find out what the actual problem is? Please see the video, after changing the name multiple times it is acccepting the wrong input and letting the action file open. https://codepen.io/hamzacodepen951/pen/xxedjzJ...

Cursor Animation

Hello, I am trying to make the cursor on this website https://www.cynthiaugwu.com/ I am here so far. Its not exactly behaving as required. https://jsfiddle.net/2xpne574/2/ It pinches in wrong axis when I move the mouse up or left. Works fine for bottom and right directions. Still figuring out why. ...