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

How can I keep 2 p elements apart from each other and centered?

I want to do something like in the picture, the p elements need to be on opposites sides and aligned by the middle of the word, not by the base. I know I could make a container for each word and put those containers inside a flexbox but that feels a bit overkill, is there an attribute that im missing?
No description

How can i center a item in a flex row div, when has 2 childs?

I have 2 itens in the header, i tried margin: auto for the element, but he has a margin since the end of the first element. By this way, the middle of my second element isn't on the middle of the screen: i want the middle of the section of buttons, in the middle of the screen...
No description

How to code this background-blending border-radius layout?

Hey, To increase the image size, I tried transform: scale(1.5). It seemed to kind of work, but I thought there should be a better way to do this. How would you approach this problem?...
No description

How can I set the divs to be in the center and not scattered when scrolling?

Hello, I haven't been able to deal with one thing for a long time. I would like these divs to be in the middle in three or four elements like in the image? I use portfolio and modal. I don't know what else to write, I showed everything in the picture. Best regards and thanks for help....
No description

Input focus color

I want to change the color of the indicator when the input is focused
No description

CSS Background image best way

What is the best way to prevent background image from scaling when screen size increase or decrease. It will always takes full height of screen or device without loosing design .

Check web on Iphone

Hi, is there any tool to check a website in the Apple-Iphone ecosystem?

Placing your content centred, not as obvious as imagined

The reason why I'm even asking this is because of the last few videos Kevin made about widths and about rethinking wrappers/containers. The webapp I'm working on now is a bingo board that I would like to place centered, which typically I would just give it a width and slap a margin auto on it. Or something like that. These last few videos got me thinking if there's a better, more "correct" way to do it....

How to make it?

Hello there, I wanted to clone this page, but I am confused when the user clicks on update information, the other page with multiple fields opened, what it is called? and how to make it. just wanted to know the process, please help me to clarify it. Thanks, Hamza...

Put text and image side by side

Hey, I want the text to be side by side with the image aligned with the nav bar logo. But it seems like the image is taking up all the space, I didn't add a smaller width, because I want the image to be that size but with the text next to it. What should I do guys? ```js // Home.jsx import React from 'react';...
No description

scaleX()

So I understand how to use the typical css scaleX() but I am wanting to do is confusing. First I want to make a hover effect that allows me to make a button looked like it grew to the right, however I am getting it gowing from the middles and moving from the center out. I am confused how to do this ```css .button { margin: 2rem; font-size: 1.5em;...

using * and box-sizing etc..

So I see KP do this ```css *, ::before, ::after {...

image stretching

i dont want this image to stretch is there a way to prevent it if i only set its width then if height of image is larger it becomes very big and if width is larger it and i dont use fixed width it pushes the other elements
No description

loop vedio

hi every one why loop vedio attribute cause high cpu usage how to resolve it

Browser zoom/Screen resolution

This might be a silly question but does your browser zoom level have to be at 100% when you develop a website? I always have it at 125% because it makes websites look normal(like how 100% should look) on my laptop, so would that be a problem? or is there a work around to this? it is very frustrating at times...

how to go about animating a wave that I can manipulate like a cubic bezier

So you have waves that move horizontally but I want to control the trough and the crest like points to make the wave to fancy stuff.
something like changing the edge of a div to a cubic bezier, where I can freely manipulate the points for the cubic bezier would also work. What is the best way to do it, or if there is a tutorial on the web for it that would be great. I couldnt find anything....

Taking in a person's browser zoom into account

On my laptop i use 125% browser zoom because it looks better based on my laptop screen/aspect ratio idk but my friend uses 100% just fine and i realize his 100% and my 100% are different. so we are working on a project together and his changes look good for him but when i load them on my 125% zoom it looks a little wack. ...

npm run compile:sass isn't working. My Node.js version is (v18.17.0). Is the version not compatible

Here is the error file when I try to npm run the script:
[email protected] compile:sass node-sass sass/main.scss css/style.css
...

How to make cut corners borders with a transparent background ?

I followed this great codepen to make cut corners, but is there a way to make the background of the button transparent without destroying the border ? https://codepen.io/kevinpowell/pen/bGLmORx...

Help creating a generic overlapping grid rule.

I'm new to css and want to know if there are any clear problems with the attached approach. Ideally I should be able to use this for any two items. The result should be two stacked items on the z-axis, with the second item being on top. ...
No description