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

Yo how to limit items in a flex?

i have 9 items and right now its 4 next to eachother and i need it to be 3 items and it will go under it

Forms functionality

Can somebody please explain how forms work? I know how to create and style to what I want, but where are they submitted to? I googled and youtube and they mention "php", but they I haven't found anything explaining where forms submit to. Like if your have a contact form, and they put the basics, name, phone, email, where does that go? and how or where does the company whos website it is get that information, does it get emailed or texted to them to call the clients? please explain and thank yo...

CSS GRID

I am trying to make a grid responsive for mobile, stacked but keeping it side by side for desktop and tablet

Border Radius Full Round on Rectangle Elements

Hey everyone, i wanted to know if someone knows a way to make in a responsive and adaptable way, the corner of one rectangle div fully round I.E: If there is a rectangle with the left and right sides shorter every corner should be rounded so that it's like an ellongated circle like this :...
No description

Face-ID Like Animation

Hi, is it possible to replicate this with CSS (and javascript if needed)? If yes, how do I do that?
No description

How to position text on top of an image using TailwindCSS

https://codepen.io/Ant-Riddle/pen/xxeOJaN I just started using tailwind and I'm reading their docs, got into a bit of a problem trying to use z-index to position text on top of an image...

React, need to avoid multiple API requests.

I have toggle button , on toggle if its on then it opens side drawer, So API requests need to be called only on opening of side drawer and show the response coming back from the API. (so everytime it clicks on toggle button it should avoid calling another api - if there is already one running already)...

HTML question --vscode <header"> added the quote mark, and breaks when removed

i have <header"> <main> <section> <header> <article> the first header vs code added the " after the first header. is this a normal thing? when i remove it, my header breaks....

Can I get a confirmation on how browsers handle unsupported CSS syntax?

If a browser doesn't support the :has() selector, will it stop interpreting any CSS in that block of styling after the :has()? If it does, using @supports selector is then the correct solution?

Fonts in tailwindcss

I was just curious, where does tailwindcss gets its fonts from? I just added this thing inside extend object of tailwind.config.js file and was able to use the font. ```js fontFamily: { "proxima-nova": ["Proxima Nova", "sans-serif"],...

CSS Custom Property override on a custom element with attribute selectors doesn't work as expected

Can someone here explain to me why the second instance of my calcite-chip component isn't styled pink instead of blue? https://codepen.io/eriklharper/pen/bGJeaJz?editors=1111

Force CSS Grid to follow the order of li elements of a ul in the HTML code.

I have this code: ```html <!DOCTYPE html> <html lang="en"> <head>...

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