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

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

useMemo,useEffect,useCallback

Does this three hook will be return and execute in the first rendering of the component?

NEED LITTLE HELP IN CSS DESIGN

Hi, I am working on this small design, and now I am stuck. I want to display a blue circle behind the white table. I've tried using a div and also attempted to use the ::before pseudo-element. I've also experimented with the z-index property. Can anyone help me finish this? 1st Image - Image of the design 2nd Image - My design ...
No description

How to fit a background-image in the browser's viewport

Hello! [Just started exploring in CSS and html] I'm having trouble to fit the background image in the browser's viewport (I used EDGE). I've tried several solutions, but they don't work. My current code does work in preserving the original ratio of the image, but it leaves spaces between the sides of the window. This is my html and css, files: https://codepen.io/make-web/pen/LYqRwVR.

CSS variable scoping when using animation

Watching Kevin's video (https://www.youtube.com/watch?v=Qj0Qx8HpNUo) on parallax had me wondering at 8:22. He goes ahead and uses the --parallax-speed variable, which is declared privately/locally in each of the .parallax's children. Each .parallex child also has an animation declared, which makes use of the @keyframes parallax animation. How does the @keyframes parallax animation scope have access to the --parallax-speed variable of every child?

Create Google Chrome extensions,start after load !?

Hello folks I have created a Chrome extension. So far everything is fine. The extension works like this, I am on the desired page. there I click on my extension at the top left and then on a button ...

How to create this border.

I’m creating a website using plain html and css and I’ve been unable to find a guide for how to create a stylized border.
No description

CSS & Design-to-Code Workflow

Hi all! So, my journey in React and Next.js is going well, but I've hit a roadblock when it comes to transforming designs into code, especially in layout and styling. Here's where I'm stuck: - Crafting different layouts or the 'shell' of a web app from a design or an existing web app is puzzling me....

center my button

Hi guys i can't get my button responsive in the middle under the textarea. I can get it with margin-left but its not responsive that way. Anyone got an idea what the best solution is? https://codepen.io/Boeroe/pen/oNmzBBg...