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

Alignment issue: Extra space on the left and right side of a horizontal list when stacked.

https://codepen.io/Mcoding-300/pen/NPWKJMK this preview may show the list vertically but it actually looks horizontal in browsers I placed a border around a list of (what will be icons when I'm done getting alignment right) to observe how much space the list may have on the left and right sides of itself 1) How do I get this list to stack without the extra space on the left side so that it lines up with the items above it when the screen is reduced for smaller screen sizes? ...

using max-content in minmax

Hi, I'm trying to achieve a grid using grid-template-columns: repeat(auto-fit, minmax(max-content, 1fr)); Unfortunately max-content is not an allowed property here. Is there any known workaround to achive such behavior?...

Gradient Shadows

How to get gradient shadows like the one behind this button using tailwindcss or vanilla css?
No description

It worked for a few submits then stopped working

It keeps telling me to fill out the form even though it filled out. when I change the condition from
if(data > 0)
if(data > 0)
to
if(data)
if(data)
it works but it add blank values to the array. I want to prevent that. You have to open console to see what I am talking about. https://codepen.io/Ishmael-Sunday/pen/emOqjeW?editors=1111...

CSS Grid Layout Overflowing and Resizing

I've made a grid layout with some containers and when I put content into each container the layout breaks and isn't stable.
No description

font not working in the footer

the font open sans wight 400 is not working in the footer and i cant seem to find the problem and another thing is how do i set an SVG image as a list items style its not doing that either https://codepen.io/saad-shehzad-the-bashful/pen/QwWLdPE

[SVG] why my stroke-dashoffset based animation doesn't seem to push my dots?

Hi everybody! I am currently learning how to animate some svg elements with css and keyframes. So I'm trying to recreate the animation here: https://youtu.be/vqXLGX0szIQ?si=u0uawtQtUnxRmI7-&t=10737...

Need help making the Navbar responsive

The code: https://stackblitz.com/edit/github-ahneo9h2 The page is /playground I need to remove the ols entirely, I guess? Can someone help me do that?...

Add several animations

Im trying to add several animations to an element by using JS because it's a dynamic element, the problem is the element.style.animation apparently only allows one declaration I cant add by using string concatenation like this :
js element.style.animation += "my_other_animation 1s ease-out"
js element.style.animation += "my_other_animation 1s ease-out"
I also can't declare them both (comma separated) because one is added when dragging and the other when the element is created. Since the declaration above takes precedence the other one is overwritten so how to add several animations ? I thought maybe adding custom props for each animation and adding class with both animations declared using the custom props? but Is there a way in JS ?? thx fiddle here : https://jsfiddle.net/dhea7rqk/1/...

Issue with Infinite Scroll Not Working on Safari/Apple Devices

Hi, I'm experiencing an issue with my infinite scroll it works perfectly on all browsers except Safari or Apple devices.On these devices, when reaching the end of the infinite scroll, a reload occurs, which does not happen on other browsers. I'm not sure what exactly is causing the problem, and I haven't been able to find a fix. Do you have any suggestions on how to resolve this issue? Any help would be greatly appreciated!...

sass file structure using @use and @forward

hi iam trying to wrap my head around sass file structure and i got lost in@use and @forwardimplementation for example my file structure is like this ; `` util ┣ _variable.scss ┣ _reset.scss ┣ _utilities.scss...

Overlapping containers Dilemma..

πŸ‘‹ Hi everyone, I have encountered a bit of a dilemma when creating a section containing overlapping container blocks… In my project I have created the overlap using β€œtranslateY: 15vw;” however I encounter extra spacing at the bottom of the section.....
No description

How to do this kind of scroll of cards

https://deadline.ma/ Here's the website, specifically in this area in mobile, see that scroll that has the top part as position sticky I guess...
No description

Infinite Scroll – How to Remove the Noticeable Cut at the Loop End

https://codepen.io/Redcaus12345/pen/EaYqEdE How can I make the end of the loop smoother? There's a noticeable cut or restart that doesn't look seamless. Any tips or suggestions ?

MDL (Material Design Lite) bug with scroll momentum

How could I troubleshoot this bug that breaks scrolling momentum in Safari Desktop 18.1? By that I mean that the page should keep scrolling and decelerating when I flick up or down with two fingers on the trackpad, and originally it worked fine, but since sometime in the last year or so it stopped doing that. It has something to do with background-attachment: fixed and the CSS class mdl-js-layout on the parent. I have narrowed it down to this codepen. https://codepen.io/peendoc/pen/xbKvRBr...

Which one is correct?

Hello, Where should I append a created element? https://codepen.io/lanszelot/pen/XJrvRjJ 15th or 17th line is the correct? Both of them do the same result, but I do not know which one is correct and why....

https://codepen.io/Redcaus12345/pen/wBwVBbm

Hey, I built a slideshow and wanted to ask if it's responsive enough or if anyone has suggestions for improvement. Is there a better way to do it? I know the images aren’t loading. 😊...

js question

https://codepen.io/etrbbr/pen/LEPoMQZ Hey guys. When I add a new <li> element, an <hr> line should appear after each one. But the problem is that when I add it via JS, it works incorrectly. How it should look – in CodePen before adding new elements....
No description

responsive-problem with the scaling of 2 images with position absolute on

hi there , if i resize the window the other on is bigger than the other one and they are not in same position as before . if anyone had an idea what i can do ? https://codepen.io/Styxio-frik/pen/qEWzwGZ...
No description

Failing to animate(using transition) something from display none to block on hover

So this is some very simple code I have to replicate the problem I am having in my main project: ``` import "./Test.scss" const Test = () => {...