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

image not loading on vercel deployment

I m using react + vite , and the issue is that the destination page images r visible on my local host but when I deployed code on vercel the images don't load , I think it's a pathing issue but I m not sure what to do . Deployment: https://chet-space-tourism.vercel.app/ And the GitHub for repo is : https://github.com/Chet25/spaceTourism ;-;...

Content overflowing

when the height of the screen is decreased the content of the container are overflowing and the content is responsive when the width is adjusted,also i want the image ogf iphone to be at the bottom edge of container.Please help me resovle it link:https://stackblitz.com/edit/stackblitz-starters-7czjm2?file=index.html...

Issues with flexbox

Hi guys I am doing some practice for css because I am really bad and I am also learning tailwind at the same time. my problem is I don't now why I can justify-center a div is what I am doing impossible or what am I doing wrong ```js <div className="flex justify-center items-center gap-[4.5rem] h-[55vh]"> <div className="flex-col justify-center">/ISSUE/...
No description

Good design ideas for smaller screen?

As you see in the image below the blue button that says "add" is way to big for the smallest size screens, Does anyone have any ideas to make this look better? https://codepen.io/hrphyn/pen/QWPWVJa...
No description

animation not working

why 's animation not working here
No description

Inifinite Scroll width issue

I have been seeing this video: https://www.youtube.com/watch?v=iLmBy-HKIAw. There applies a solution when clips the animation, that is not working in the width I'm using

CSS border-image

Why cant i get border-image: linear-gradient(red,green); to work but border: solid red; does, What could be causing it to do this?
No description

cant put elements on the level a photo is

basically i am making a portfolio for myself while learning html css and js and i have a photo at the top and some text below it but when i add a new element for a home button and i want it to be at the top level like where the photo is it wont let me and it wont let me put anything in that area the photo is (creating a new element just puts it above where the element is on the left, see image)
No description

sticky element move outside parent element

So... I don't really have an issue. It's just a question... But, i have always thought an element with position:sticky; cannot move outside the parent element. But i just realized today that it can actually move outside parent element... But this is really strange. To make position:sticky; element move out from parent element, the parent element needs display:initial;. But the strange thing about this is that as far as i know display:initial; will revert the display value to it's initial value (the default value) but even if you have never changed the display value of the parent element, it the sticky element wont follow until you add display:initial; to parent element. Can anyone explain this to me because this really makes no sense at all. I am so confused 😂 ...

Absolutely positioned element not behaving as expected

I expect it to stick to the div called flex but it isn't for some reason I've tried debugging In the pen it isn't working at all https://codepen.io/Dev-T/pen/ZEZEaNJ...

Slider/Carousel

does anyone know how to recreate this? I tried slick and other slider library but no luck https://dribbble.com/shots/6476011-Quotes-slider...

Unable to find the error

I'm trying to apply animation to a box,in the html i created a div with class ="box" and i gavE the animations,i wanted the box to move along the border of the viewport,and change color after the box moves along next side.But it is not moving along,its just changing the colors

React beginner question

Do we need to know what all the react build tools do(like:vite,eslint etc) and add them manually using npm or is it more efficient to use create-react-app

how to wrap text in input tag

Is text wrapping possible for input tag?

Realise a single page

H ieveryone I want realise a single page...

How to move elements inside a container? (vague, I know)

https://github.com/callum-laing/shopping-site Apologies I tried putting this into codesandbox but it spazzed out, and codepen didn't want to do it either. I'm trying to find out how I move the positioning of the 2 elements on the side (CDL, and the shopping cart image). I tried padding-left and padding-right on the header, but that also moves the links in the middle, is there a better alternative here that doesn't disturb spacing of others?...
No description

Media Queries

Hello, could somebody please tell me what I am doing wrong? I have been learning media queries and I do not understand why the video, and 3 floating things are not staying together, is it the set 75vh? I have tried to changing the height at the break point but it does'nt seem to do anything, also creates gaps within other divs. please help. please and thank you. im really just asking on advice for media queries, ive looked at a lot of videos mostly Kevins, simply cannot grasp all the concepts. ...
No description

please help with footer

i will really need assistance with the footer on how to make the resize

Logo with fixed position, but relative to the container

Hello guys! As you can see in the video a part of the logo should be “fixed” and moving through the whole website. How should i make this? If i use “position: sticky” it just stays in it’s section, if i use “position: fixed” it overflows the container stylings and it wont shrink together with the original logo when the screen size is changing. Any help would be life changing 🙏🏼 Thanks, Andrew