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

can clamp() be used for anything other than font-size

well I know what clamp() function is or what it does I've only seen people using it for font-size but i wanna know if it is possible to use it anything else for example, margin, padding or gaps I also know about min() max() functions that we can use but i once used clamp() for gaps and it worked quite amazing...

Mobile nav bar

Hi guys i have a space between my header and navbar on small screens. How can i make it like the picture or whats going wrong? https://codepen.io/Boeroe/pen/xxMgrxz...
No description

website hosting

How can I host my website to a browser and it work effectively whenever it's searched

Grid question, wrapping when using grid template-rows

Hey, I've not used grid so much so bear with me, I'm styling a definition list and have got it looking exactly how I want it, however I want the dt + dd items to wrap onto a new line when overflowing horizontally. I guess my question is, is this possible with using grid-template-rows? and if so please impart me with your knowledge ❤️ example code is https://codepen.io/brumgb/pen/XWOpKEx...

Maybe a stupid question..

So I have a problem whenever I write CSS code in VS my page always scrolls back up to the top. I find this annoying as I cant see my changes. I'm a complete beginner so any help is welcomed.

infinite horizontal scroll animation in react

I have watched the tutorial in html and am trying to use this in react: https://codepen.io/kevinpowell/pen/BavVLra, however am not able to animated, Any help, this is my current implementation: import { useRef, useEffect } from "react"; export default function LogoCarousel() { const scrollers = useRef([]);...

Smooth gradient

Hello guys. I was just watching one of Kevins videos and noticed a smooth gradient which he used. How do you do so smooth gradient?...
No description

React Card CSS Layout ( beginner )

I am not able to target the from class div in the card, the style won't change even when I change the values of the properties. I want to turn the card into what is show in the image, please help me to do so I am a beginner. CODE: https://codepen.io/Prajwal-Nakil/pen/bGzBJrj...
No description

Margin-top and bottom not working

Hi guys, as you can see at the last page its right against the bottom of the previous div and against the top of the footer. If i try to add margin-top and bottom its not working. What am i doing wrong or where should i add this: https://codepen.io/Boeroe/pen/qBgqwRZ...

Svelte - VS Code initial files with Vite, what is what?

Making sure I don't make the same mistakes I made with my React projects 🤣 1) are all component files being held in ./src/lib? 2) App.svelte, is this the equivalent to app.jsx in React? so the main file where I import all components to build the app, and then push this file into main.js?...
No description

Clamp function

What do you think about the clamp function used to declare font-sizes and sizes for a semi-auto responsive design? I discovered it recently and I'm using it for a project and it seems pretty good, however I don't usually see other devs use it....

Component similar to google input

Hi, I am looking for component similar to google browser input. You can type something and you will get autcomplete. I was looking throught internet (I am using shadcn-ui) but wasn't able to find anything like this. I endup with react-select and <input/> as w input. Do you guys have any ideas if there is such component available somwhere in react? Thanks...

Html code on language translation is breaking

I have one html email created, when i translate the email from english to different language complete look of the html email is messed up. anyone know how to fix it screen shot attached. I can forward that email when we click on translate it breaks. (happen in google chrome gmail) web browswer also in mobile app same happens...
No description

Vertical squishing of elements even with overflow-y: scroll

The container where my elements sit has the property overflow-y set to scroll, but even with that, when I add more elements in it, they get squished vertically a bit. How come?
No description

Hello everyone! I thought there was a room for the CSS Class but I don't see it?

My question is: why can't we use flexbox to separate the nav items at the top of the page? It works to separate the 2 ul's and before I saw the video on how Kevin does it, it worked to separate all the ul items with justify-content: space-around. Does anyone know why once the lists are separated into to nav lists the child elements are no longer effected by flex box???

Fixing card width

Hey, I don't understand how to make my cards width fit the content instead of being so large. Tbh I don't even know why they are being that fixed width. In the computed data of the devs tools it doesn't redirect me to any declared property (there isn't the right arrow) beside the value of the width. I mean sure I can hard code the width of the card but I was searching for a way to make it fit the content inside automatically...
No description

Margin-top causing vertical scrowbar

My html,body, and another div called Root, all have height of 100% ( I cant use min-height the root would not expand to the full height of the parent), when i give a margin top of 2rem it causes a vertical scrowbar, i cant understand why it's causing an scrowbar or how to resolve it <!DOCTYPE html> <html lang="en">...
No description

A simple responsible layout

Hello! I am making this little website and i need to have like an "info" section about the company's products. I was able to make it work on a computer (wide screen - 1000px and more) but not on narrower screens. Something like in the image. Btw the images should be something about 16:9 but its not limited to it, just so they are not smaller than 3:2. Could someone please help me. Thanks! 🙌...
No description

How do I achieve this effect in my image?

How do I achieve this effect in my image? I tried with background-blend mode and it didn't work.
No description

How can I make this sticky section, with reverse column scrolling effect

Hello, guys. Over the past few days, I've been attempting to reproduce a particular video effect, but with no success. I'm really eager to find out if this can be achieved with CSS only (although I'm quite certain it's not possible). If Vanilla JS is necessary, could you please outline the steps to accomplish it? Unfortunately, the original poster was unwilling to share the URL, making it impossible for me to examine the code. I did, however, come across a similar effect on [CodePen](https://co...