KPC

Kevin Powell - Community

A friendly place for developers to meet other devs, ask questions, get help, and just have a good time 🙂.

Join

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

imTypθ

11/4/2023

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?

Matty100

11/4/2023

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

! nier

11/4/2023

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

cerstar

11/4/2023

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

★ stargirl ★

11/4/2023

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

Chaves

11/4/2023

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.

kostas

11/4/2023

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

Abrar

11/4/2023

useMemo,useEffect,useCallback

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

Salman Khan

11/4/2023

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

carl

11/4/2023

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.

Silvershot

11/3/2023

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?

Brings

11/3/2023

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

stoney

11/3/2023

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.

alberduris

11/3/2023

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

Boeroe

11/3/2023

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

11/3/2023

Getting a Clip-Path animation to start from the cursor position (like a ripple effect)

Hi, I have this card and I'm trying to have a background circle fill effect on it where the circle expands from where the cursor is, I have a card div and I'm using its ::before pseudo element, first I tried to put a clip-path: circle(var(--size) at var(--transform-origin) on it and control its size and position using custom properties on the parent div which I will use javascript to animate them. I'm updating the --size and --transform-origin using javascript but since I have to use a default value for --transform-origin to get the clip-path rule to work when the page is first loaded the default value is getting read first and then once you click on the card the --size become 150% and the circle fills the background but the position is starting from the default value and not from where the cursor is, but when you hit the reset button it shrinks back to where you clicked earlier. - Here's a code pen for the complete code https://codepen.io/x287x/pen/zYeKQwP...

Pat66

11/3/2023

Dropmenu menu

Hi everyone I realise this menu but the problem is when I click on the button contain in iv who have entete class the div who have class info appear on the div entete ...

suicidedog

11/3/2023

Button borders and best practice in a design system

Hello. I'm trying to translate our UX-designers design into working buttons using scss. They have a default state without a border, and recieves a border on :hover and on :focus. This makes the buttons take up extra space, which visibly make em dance in a way I'd like to avoid (pushing elements close to them away). The button will be a part of a design system, the point is to make the buttons available to pretty much copy paste into other projects and work as intended. ...

Jimster

11/3/2023

Navbar item extra padding

https://codepen.io/web_dev_pr0/pen/KKJgJZa

The Internet's own Kiddo

11/3/2023

Issue with positioning ::before pseudo-element behind the main element

'm having an issue with CSS styles for an element with the class .vision-card and its ::before pseudo-element. I'm trying to hide the pseudo-element behind the main element using z-index: -1;, but it doesn't seem to be working. Here are my styles: https://codepen.io/jackyiakovenko/pen/KKJgobr?editors=1100...

Previous Next

Gaming

Programming

Kevin Powell - Community

A friendly place for developers to meet other devs, ask questions, get help, and just have a good time 🙂.

Kevin Powell - Community

A friendly place for developers to meet other devs, ask questions, get help, and just have a good time 🙂.