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

Angled border radius?

Hi, I am trying to recreate something, and am struggling to recreate the corner. They just did it with an svg, but I wanna do it with divs. How can I create the round corner thingy? Current code (TSX & TWC): <div className="w-4/6 h-[calc(100vh-14rem)] ml-28 flex flex-col items-end"> <div className="bg-[#3827c8] h-14 w-96 rounded-t-[3rem]"></div>...
No description

Responsive Design

I was just wondering when do I start working on the responsive side of my pages. Do I do it along working on the desktop view? or do I fully finish the desktop view then make media queries for other devices?

500 error

please solev this error in next.js with vercel deploye
No description

(three.js) MeshTransmissionMaterial not working

```import "./index.css"; import * as THREE from "three"; import { GLTFLoader } from 'three/examples/jsm/loaders/GLTFLoader.js'; import { OrbitControls } from "three/examples/jsm/controls/OrbitControls.js"; import { pcss, MeshTransmissionMaterial } from '@pmndrs/vanilla';...

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)...