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

Flexbox, show elipses instead of wrapping when screen shrinks (tsx)

Hello, I've been racking my brain figuring out why this code works on codepen but not on my own code. My code: ```<Card key={index} sx={{...
No description

I'm having trouble when deploying on Github Pages

Pretty ambiguous question but I haven't found a solution yet. I did a quick project with SASS and when developing everything was working correctly along with the Live Server Extension but now when I deployed it, it looks as if I didn't use any CSS. Why can it be? https://github.com/Norwyx/interactive-rating-component...

Why does the eyes stand outside of the div and get pushed down?

the eyes keep standing outside of the eyes div even though they are in the same class. why is this happening?
No description

working with api's using fetch

I am trying to figure out why this is not working properly. I keep getting undefine when I console.log(data)? and when I do something to mess it up on purpose the browser the .catch statment says it is wrong but I copied it from the docs and the only difference is that I put er instead of error ```javascript async function getData() { const data = await fetch(url)...

Interesting JS effect

Not sure if the is the right place to ask if its possible to reproduce the effect of the blue female boxer, 3 or 4 screens in of https://www.paris2024.org/en/design/? This is created using JavaScript, but I wonder if it or something like it could be done purely with CSS?

CSS keeps adding an unnecessary gap

Right, so I've made a div with an input and button. Here is the CSS: .subscribe-box { background-color: var(--clr-light_2);...

need help with model positioning in three fiber

i have been trying to add 3d planet/moon models in my project and i want them to rotate like a planet around its axis , in my project they seem to rotate around a point instead and i have spent hours trying to magic number them , the mars was fluke it worked but i have 3 more and idk what to do ,
i m using react - three/fiber and three/drei , the models from sketchfab github link : https://github.com/Chet25/spaceTourism/blob/planets/src/components/Destination.jsx this is the link to the page , if someone knows about this help me , i m loosing brain cells over thisπŸ₯Ή...

Can not move around on mobile devices if user touch input field

Hi guys, I'm facing a problem. When my app is on mobile and I zoom in the screen I can not swipe left and right if I touch the input field. Is there any solution to fix it? I have try to use touch-action: none on input field but it does not work

CSS Z-index changing unexpectedly

I have simplified this just to show what is going on. I have a box (originally a button), with a 3D effect. When it is hovered over, the box rises by 2 pixels and the 3D effect drops by 3 pixels (hiding it). However, for some reason the 3D effect behind the box moves in front. Can anyone explain why this is please? https://codepen.io/iBlackwolf/pen/ZEZWdQx ``` <!DOCTYPE html> <html lang="en">...

dynamic height for inner grid item

Hi πŸ™‚ In the link below , there is an inner grid (with class="main_cards") How can I make its gird items (div with class="card") to get all available height of the parent. in a way that they reach the footer. I know I can set it with calc function but I'm looking for a better solution....

CSS Slider row

I have been stuck with a css problem for days. My aim is to create a row (width is not known) which will have content and button in the end. When you click on that button, the row should slide to the left and some other content like icons appears from the right. I have tried it with absolute positioning with translateX, which works but the icons that comes from right goes over the row and the row doesn't slide to the left. Can someone provide any suggestion please? Thanks

How can i validate the inputs ?

i don't want this to happen, because it is awful so can anybody help me fix this ? code : https://pastebin.com/NrVx2s9g...
No description

How can I select only 2 weights of a variable font?

Whenever I want to use a variable font, I can only select one value or the full axis, so I always end up getting the embedded code for the full axis (all the weights available). How can I select only two weights for instance, so it doesn't bloat my html? Regular 400 and Bold 700. It only allows me to select one value or all values (full axis)....
No description

Does centering with flexbox remove the effect of block divs?

Whenever I horizontally center a div inside a flexbox, the div just seems to lose the effect of being a block element. It doesn't take the entire line width anymore. Is that just how flexbox works?

Css animation keeps going down and up

The animation i made for a div class keeps going up and down while playing, is there a way to fix this?

Starting out. Any tips appreciated

https://irelativism.org Next thing I wished to fix on my page woulf be the startpage is floating on the left without being in midle top of the page has a slider...

Buggy grid with container layout.

I've setup a site with the container layout as shown in https://youtu.be/c13gpBrnGEw?si=y7HnB4eeG-uhUsds. But I had to include a sidebar. So I've added that in. The issue comes now with a .full class it won't flow all the following elements anymore. And enabling the grid debug lines it shows many lines. ...

Font Face / Hosting Own Fonts

When using font face to host your own fonts, do you need to add it in for all the font weights you use for that font or?

How to make the text appear letter by letter?

Hi everyone, I came across this website https://www.au-charme-rabelaisien.com/ and I liked how the logo appears progressively in a handwritten style for the splash screen. Do you know how to achieve this effect? Thank you!