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

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

How you summarizes the design using HTML and CSS

I was looking around for different design to improve my skill and came across to this design but I am confused how what will be HTML structure and ofcourse CSS. I have done a little work, Below is my code ``` <div class="pizza--container"> <div class="container--img">...
No description

Why does prefers-color-scheme need duplication of styles?

I was watching KP's video on using dark / light themes: https://www.youtube.com/watch?v=zFFuV_vXNhY&t=36s And it works nicely, but it bothers me that the styles are duplicated in :root definitions as well as the theme switcher ":has" definition. Why is the duplication needed if I have selected the theme using color-scheme: [dark|light] declaration? It seems to override behaviour for system styles, but not anything I've defined. G...

SVG and position absolute.

Hi, I would like to acomplish the design shown in image but with ability to use width 100% so it is responsive. The arrow is svg. And if I could I would like to in the end animate it that the line shortens on hover to the right, but I didnt yet get to it becose it didnt work in first place. ```<svg xmlns="http://www.w3.org/2000/svg" height="50"> <!-- Define an arrowhead marker --> <defs>...
No description