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

Why is the image getting chopped?

The image is getting stuck behind the scrolling div, i want it to pop infront of the scrolling div.. ` <div class="main-content"> <div class="main-content-scroll">...

gradient text input outline border-radius?

Do you have a technique for giving a text input a gradient outline on focus that has a matching border-radius with the text input? I found a solution for the gradient outline using border-image on focus but this doesnโ€™t allow a border-radius here is the CodePen with border-image, this is the effect Iโ€™m looking for I just want the gradient outline to have a border radius as well https://codepen.io/jq712/pen/KKEzmJK

Next.js | What to use for icons?

Should I use <Image /> component from 'next/image' for icons or should I use something like react-icons for that instead?

Best way to "reorder" elements differently at different breakpoints

I have the following design I made for my portfolio hero and now that I'm going about coding it, I realize I made a bit of a problem for myself. In my desktop view, my CTA button arrives before my social links and the hand image is in its own layout section. In the mobile view, the social links seem like they would arrive first in the HTML and the CTA button after. I've decided I should switch over to trying to do my mobile side first today, as I had pretty much completed my hero focusing on the desktop view first. Here's the relevant HTML and SCSS, which works on desktop: ```html <section id="hero-section">...
No description

How to achieve this effect? and what is the name of the effect?

hey there, I'm trying to achieve this effect with html, css. can you please tell me what is the name of this effect? and how to achieve this effect? can you provide any useful resource? thanks in advance....
No description

Get ride of commas

I'm doing an english dictionary app, a problem I'm running into is: because of the map function, the code is displaying commas. I want to get ride of the commas, I thought about using "replace" but I'm afraid it will also replace the commas from the examples and definitions texts. Does anyone know how to do this or how to display the content in a better way?

Why subscribe doesn't work with zustand?

why when state gets update subscribe doesn't work? ```ts const useCartStore = create(subscribeWithSelector(cartStore)) useCartStore.subscribe(...

How to only target text content of element?

I have a div that contains a number of spans as its children and also a bit of text. The text is not surrounded by any tags, something which I cannot change. How can I target (i.e. style) only the text contents of the div, but leave any children of the div untouched? (I hope I'm not overlooking something very obvious here...)...

Rebuild an animation

HI everyone I want rebuild this animation...

Request for a personal mentor

Hello, am Racheal and I have been struggling quite a bit with responsive design. My goal is to get better this year,so I need someone to guide me. Like maybe give me a task,then we can review it after a day or 2 . I feel like I learn better this way. And I am able to stay accountable and focused. I'd appreciate your help. Thanks...

About height in css

Hi everyone Sometime when I post some codepen and when I wrote his ```css...

CSS for variable length list to create new columns at a max count

I have a site that is fetching a list of items. That list can be 0, or up to 20 items, rarely more, the most I've seen is 42. I'm trying to organize them into a div such that if there are more than 10 items in the column, it starts a second column. At 20 items, it would start a third column. To further complicate things, each item consists of 3 "pieces" (ID, Description, Flag) that I'd like to align with the others in that column. ``` -------------------List Heading-------------------- ID1 Desc1 Flag1 ID11 Desc11 Flag11...

how do I recreate this scroll animation in this website - https://musho.ai/

How can I create the smooth scroll animation which seems to slide on top of the hero section like in this website - https://musho.ai/

iPads/iPhones: problem with my Homepage

Hello everyone, first time poster here! So I'm a potter who has some html/css/js experience and I decided to challenge myself and redo my website from scratch, often following Kevin's tutorials for support.
Anyway, it's online and working pretty good except that my homepage has content that can't be scrolled on iPads and iPhones. There is content under an image slider that serves as my hero section, as well as the footer. I don't have either of those Apple devices, but I was able to confirm the problem with several friends who do. I thought it might be Safari, but the problem exists in other browsers as well! However it's not a problem on Android tablets or phones as far as I can tell, my homepage behaves as expected. On the iPads and iPhones the other pages of my site work as intended: the content is scrollable all the way to the footer.
I have no idea what could be causing this since it works on many other devices including iMacs and other Mac laptops. The address is https://www.patrickduclos.ca/en/index.html Any clues or insights you may have would be greatly appreciated as I am at a loss here. I checked using the devtools on my Win PC or Apple products emulator websites, but they all show my homepage as working fine....

Collapse Nav (Broken)

Here's my current code: https://codepen.io/Matt-CopOffMatt/pen/eYXJBpN Currently, I'm having issues with my functionality for collapsing by clicking outside of the menu. The following check: ```...

JavaScript.

This code opens a navbar menu. How can I make it so that when I tap the same button it will be close? Please explain to me in a way as if you are explaining it to a beginner. Because I am a beginner ๐Ÿ™‚ . If possible, show me a better way of doing this....
No description

Relative Path's for background-image URL

Hey guys, can anyone help me understand why only the first url path is working?
No description