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

Text in Responsive Background Image Overflow

```css .background-image-anime { width: 100%; background-size: 100% auto; background-image: url('../assets/ezgif-3-d2831f8743.gif');...
No description

What tag should be used in the shown section?

What tag should I use in the part where there is a photo, which is the best approach?
No description

What should I do to this svg background (I'm new here and still learning)

it seems like this svg image that I'm going to put it to the background of my heading section seems a bit smaller than my screen (Svg background seems fit only 1440x but my screen is 2048x. And What should I do or design to make this 'svg' perfect?. I'm quite really hard and new thing for me to design this
No description

Guidance To UI Design

I am Trying to replicate this UI. I have tried to replicate them but the steps are not aligning properly. how can I align them . , Can you please tell how can I Do it . Please find the codesandbox link : https://codesandbox.io/p/sandbox/floral-cdn-7n2c7t?file=%2Fsrc%2Findex.css%3A9%2C2
No description

How to add two different background images on the body

Guys, how do I add these two SVGs so that the first is at the top of the document and the second is at the end? I painted them red just for you to see. Repo: https://github.com/sircarloschaves/social-proof-section...
No description

Images not displaying in React production build

I'm facing an issue with my React app deployed on production where the images from my images folder are not displaying. Locally, everything works fine during development, but after deploying the app, none of the pictures are showing up. my goal is to import my entire image folder to the website I've tried to use import images but no luck My project structure looks like this:...
No description

How to select previous sibling

If you run this code, the .last button will increase its width when the .central button gets :hover, but the same thing wont happen to .first, I guess because it's before .central, how do I make this work? ```html <div class="flex"> <button class="first">ciao</button> <button class="center">aaaaaaa</button>...

compiled .css files not pushed in repo

Hello everyone, I was adviced to not push my dist folder with .css files , infact I added the folder in a .gitignore but css style from my webpage is not showing now. Can anyone advice me what to do because I think I got that wrong … Ps. I created another folder with the main.css file and a script in a json that allows me to copy the changes from dist/main.css to css/main.css...

React Unit test case issue with MSW mock service provider

I have been doing React+TS unit testing , where I have bene mocking API response using MSW mock service provider I am able to get mock response in my redux slice but it is not updating respective state and I am not able to test respective components .. Anybody has gone through this if yes then could you please help me on this . I Have created React application using CRA....

Animation on scroll

Hi guys, I want to give each page an animation that when you come to the page it inserts via right for example. What is the best way to do this so I can add this to other parts of the entire website as well? https://codepen.io/Boeroe/pen/zYeRobj...

Mobile Navigation

Please help me fix this error I get a massive space between my header and main content when I switch to mobile here is the code link https://github.com/legend-crypt/Portfolio-site...
No description

Help fix array mirorring each other issue.

good evening everyone, I'm working on a prototype for the to do app section and I have a bug that i have been stuck on for a couple days now, the bug is 2 different arrays mirroring each other when I click confirm when a editing a task prototype. I would greatly appreciate the help thanks in advance, here's my replit => https://replit.com/@Stanbkrylix/Simple-todo-app-prototype#style.css

learning how to structure page

is the structure for the nav good? I want to learn how to structure html documents https://codepen.io/vert-wilson/pen/vYbdNox

cqw not a thing yet?

I was fiddling around with a mobile application lately and stumbled upon the unit "cqw" which I found to be a more elegant approach to dynamic font sizing than em/rem in regards to supporting unknown resolutions. However in my editor I get an error "Expression expected" when using it, and caniuse tells me it's not supported by Firefox yet. Is it simply not a thing yet or does it come with unexpected drawbacks I don't see?

using async on ngOnInit

does using async in oninit good practice ?
No description

run function once but globally in react

when i make webpage, one thing i generally do is set all the divs to a random color using js for better understandng now that i am using react. im confused how to do it my react project goes like this i have a Main.jsx that renders App.jsx...
No description

Layout issue

i am have this issue where i want this button to go down . to stay at the bottom of the page https://codepen.io/alyydd/pen/xxMprjb...

How to achieve a scrolling upwards effect, while parts of prev one still in view

I have this animation that i would like to recreate using js and css based on a list of words from a cms. I lack animation skill, and am in desperate need of help in modifying my code to recreate the wanted behavior. My code: https://codesandbox.io/s/2v85nk?file=/src/TextSlider.js...

CSS layout issues

there are three images the two of the are made-up images and one is I have to create. how can I create this layout...
No description

CSS Flip Animation enhancement

I have a project that is a phone for a game - especially GTA V(FiveM). You can check it in the browser here - YFlip Phone This is a clone of the Samsung Galaxy Z Flip 5, and it is made entirely by me. ...