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

Grid area and negative numbers

https://codepen.io/fluffybacon-steam/pen/ https://codepen.io/fluffybacon-steam/pen/PoVVWMO (ended up destroying the last pen, here is a new one) I am trying to span a green line (#greenline) across the entirety of the grid-area using grid-area:1/1/-1/-1; This does not work as intended and the line ends up sitting in the first row and column. Only when I implicitly declare the end row and column, grid-area:1/1/5/3, does the green line behave as expected. Why is this happening?...
No description

Text overflowing, need it to be scrollable

My side navigation items are overflowing and is coming below the 2 buttons. How do I make it go up and become scrollable?
No description

Parallax Effect

I need help on a React project am currently working on, I want to implement a parallax effect on a particular section am working on and I don't seem to know how and I need your help, please. The effect I want to implement is for the footer, how do I stick it to the bottom and unveil it with the previous section

My CSS "absolute, left 10px" moves when animated

Here is my Codepen project https://codepen.io/iBlackwolf/pen/RwvEKOZ I am trying to make my menu shrink in size when closed, but remain 10px from the left of the div. I have no idea why is moves to the right. The actual animation is supposed to take 1 second, but I have slowed it down so you can see the effect better...

Forcing a Line Break (Responsive)

What's the best way to force a line break (<br>) but based on screen size? Using JS, or hidden HTML tags?...

Responsive Layout Issues

Hello, I'm having some difficulties making my layout responsive. From my Chrome POV, everything looks decent. That is until I open on my phone and everything looks entirely different. Any Suggestions or Tips would be greatly appreciated! Here's the link - https://nickscharpit.com/...

Any CSS Wizards? Gradient Animation around Pseudo Element

I have a pseudo element on my header/navigation & a gradient animation div - I am having trouble figuring out how to make the gradient animation div continue to look like it goes around the pseudo element. My initial thoughts were that I could create a pseudo element on the .gradient-border itself the same shape/slightly larger but I'm not too sure how that would work utilising border-top etc to get the shape & how I can make the animation effect look like it goes from left to right around the pseudo element. This is what the header:after element looks like:...
No description

Autocomplete for custom props on Sass

Hi everyone, I was experimenting with a Sass mixin to automatically generate custom properties for colors based on a Sass dictionary, and it works great. However, I've faced an issue. Since the mixin creates the custom properties directly in the CSS file, they are not detected from the SCSS file I'm working on. As a result, I can't use the IntelliSense autocomplete to quickly write the custom properties when I need to use them for styling. Has anyone found a solution for this?...

positioning confusion

hello, while making this landing page , i have to fix the header using fixed position property. while doing so the elements i write after that header appears below of it also takes the place of that header (which makes sense) in normal document flow. but to be able to make this landing page complete i have to apply paddings and margins at top .is it the right way?...
No description

vanilla extract

Howdy 👋 Anyone here work with vanilla extract? Basically - wondering how it would be possible to do specific styles for hover in dark mode. If I try doing something like in the attached screenshot, it doesn't work. Would appreciate any help on what pattern I should use to accomplish this. Thanks!...
No description

Achieve this effect : Glass Metaballs

the title with preview picture says it all. I know how to do both of those, however not at once as one kinda disables the other. I found this design on the instagram and immidiately i wanted to recreate it so badly ...
No description

Ideas for placing curved SVG graphic over two sections?

We are commencing a build this week, and have stumbled upon an interesting SVG curved graphic that the design team has put together. We are curious on how others would solve this? 1. Seperate the graphic and set as a background image on each section?...
No description

How can I make the time bar the same height as the date clock?

hello good morning could someone help me repair my source code with source code please. I send you my code, together with an image for what I want.

Different css subgrid behaviour in ios browsers vs android and windows browsers

first in windows firefox second in ipad firefox html and scss code ss...
No description

Chrome freezes/ crash when is try to open my index.html

So I'm writing some JS in VS and when is try to open my browser to see the console, everything freezes and crash. Does anyone have any idea why this happens. All help needed, thanks!...

How to make these?

Hi, could anyone tell me how to make this, when user click on cart, it shows list of products in cart, and same for favourites, what it is called? and how to implement it?

subgrid vs inherit

Is anyone aware how using grid-template-columns: subgrid; differs from grid-template-columns: inherit;? Yous think if they were exactly the same, they wouldn't spend so much time developing subgrid. I know gap is auto inherited from subgrid , but not sure if inherit also inherits gap. ...

How to implement it?

Hi there, usually when we open any website, this type of box pops up with out clicking anywhere, how to implement it? and still we will call it a modal?
No description

feedback

just finished building i need your feedback for improvement https://codepen.io/vert-wilson/pen/JjxepzQ

How to pop out bottom left/right corners

I'm trying to make the steam game card hover effect. Here's my codepen: https://codepen.io/vince1444/pen/BaMGQWz So far, I have transform: rotateX(10deg) translate3d(0, 0, 25px) scale(1.05); on my article:hover selector....