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

Navbar doesn t work in mobile

I'd like to know why my navbar when I put it a position fixed the dropdown mobile does not work, can someone help me? Link: https://656676d9227bb411d9612f93--zippy-crepe-af5c29.netlify.app/...
No description

Infinite Scroll...

I LOVE Kevin's Infinite Scroll but how do I force it to show only 3 images at a time or two, etc? https://codepen.io/kevinpowell/pen/BavVLra

Problem with the form - the message can be moved sideways after expanding

Hi all. As in the title, if someone wanted to enlarge the message, I would like it to be possible to scroll down instead of sideways. In short, there is a button to enlarge the message, I want it to only be possible to scroll down. It's my first time making a form and I can't quite get it done. mypen: https://codepen.io/Bartomiej-/pen/MWLBpjO...
No description

Short question: How does CSS zoom work?

I need to figure out the new width & height of an element. And as getBoundingClientRect() doesn't compute the zoom (or well - it does, in a very buggy way: 1000px width with 50% zoom results in 999.34565px or so...) so I need to calc it by hand. So does zoom take the diagonal of an element and I need to go with Pythagoras (never expected to really use it in my life :D) to get the new width and height? Because this:...

Bottom Navbar

Hi, everyone. I am trying to make bottom navigation bar, but when i scroll page to the bottom - it overlaps on text/components. How can i make it visible all the time, but to not overlap on other items at the bottom of the page? stackblitz: https://stackblitz.com/edit/stackblitz-starters-bm1fj6?file=app%2Fpage.tsx...
No description

Need advice on making CSS Grid containers equal in height/width with responsive design - any tips?

I'm facing a challenge with CSS Grid Layout in creating a responsive design where grid containers need to have equal height and width. These containers hold varying amounts of content. While I've tried using min-height, it compromises the fluid responsiveness of the layout. I'm looking for a solution that maintains equal dimensions across these containers without losing the responsiveness. Has anyone tackled a similar issue or have suggestions on how to achieve this effectively? Any insights or alternative approaches would be greatly appreciated! Please go easy on me. I'm only doing this to learn about Grid and am overwhelmed by Clamp, Minmax, etc. 🙂...
No description

I can't see my images

I am trying to make a slider carousel, but for some random reason that I don't know, I can't see my images on the screen.... I just can see the dots from the sliderSettings In the SlideImage style component only has a width for the img ```js import React, { useEffect, useRef, useState } from "react"; import { ProvaSocialContainer, TextContainer, SlideImage } from "../styles/ProvaSocial.style";...
No description

@ directive in react

I have seen some using this way to import components in his file. @/components/component Can anyone tell me how he is doing this: @/components...

How can I make this code cleaner ?

Hello, How do I make this code cleaner ? I have main js file and this dom manipulation js file which I export to main js file. Should I declare dom variables inside functions they are used in instead of putting them on top of file?...
No description

JavaScript querySelect & document.getBy issues

Usually I have no issues with it, but right now, I'm being stumped by this and cant figure out what on earth is happening here (see image) So, the getElementsByName returns a nodeList witha length of 1, so basically index0 yet calling upon [0] is undefined? ...
No description

How to make font-size relative to the div element.

Hello, i started learning HTML/CSS recently and i can't understand how to make the text responsive. I want to make it like an image for example with width and height in %. But it doesn't work with font, i tryed with VH but when i resize the browser i have overflow issues. I saw videos about EM and REM but i don't see how this would help me. They are still fixed sizes like pixels. There is no way to make it relative to the size of a div? If you watch the screens i uploaded i used vh to the text and vh to the divs. When i resize the browser the text resizes to the screen size not the div element that is resizing too, and is creating me problems....
No description

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....