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

help

Stop Safari Auto Zooming Form Fields

Is the only way to prevent safari from auto zooming on form fields to set the font size of the fields to be at least 16px? I tried adding the meta tags as suggested here https://stackoverflow.com/questions/2989263/disable-auto-zoom-in-input-text-tag-safari-on-iphone but auto zooming still continues to happen It seems slightly ludicrous to me that increasing the font size is the only solution...

Extremely large textarea

Well, yeah. For some reason, the textarea just keeps growing and growing. ```tsx "use client"; ...

[Video attached] My Sidebar is not sticking

Hello. I am trying to keep my sidebar stay stuck to the left side of the screen but it seems to ignore the sticky positioning, getting scrolling up with the content on the right side. How do I resolve this issue? Thanks in advance.

:hover applies even when the grid gap is hovered. Any way to fix it through CSS?

I’ve been working on a grid exercise and ran into an annoying issue. The goal is for all cards to have a default opacity of 1. When a card is hovered, its opacity should stay at 1, while every other card fades to 0.5. https://codepen.io/NotNegative/pen/LEpMKNB ...

email unsubscriber

guys , an app or a browser plugin like an email newsletter uninstaller , how do i build something like that ? do i need to connect to any 3rd party api ? im a beginner so please go easy on me and tag me when you answer please 🙂...

View transition durations

Anyone here have decent experience with view transitions? I'm wondering if, you have a long transition on the root, that it won't block all interaction even when shorter groups run? I found a work around using custom properties, where all the view transitions use a --vt-speed custom prop for their duration, and then when different functions are used to trigger specific view transitions, that function sets the custom property to the desired speed, but it feels like there should be a better way?...

Best place to get help with making wordpress themes and/or plugins

Hello, In the future I want to learn to make wordpress themes and/o plugins. In the past I tried the wordpress forums and the stackexchange site but get there almost none answers. ...

Does the new popover API use dialog element under the hood?

Maybe it's a misunderstanding on my part but I always thought that if you need an element that interrupts the user flow, like any popover does, then it should be created with the <dialog/> element or else it would not be accessible. Is my stipulation incorrect here? If I am correct, then does adding popover automatically adds the <dialog/ element as a wrapper? This doesn't seem to be the case from what I can tell after looking at the dev tools. ...

How to adjust Height When Virtual Keyboard Appears?

Does anyone know if Kevin has a video explaining how to adjust a website's height based on the appearance or disappearance of a mobile device's virtual keyboard? I found Kevin's video on vh vs svh vs dvh https://www.youtube.com/watch?v=ru3U8MHbFFI very helpful. Around 4:10 he talks about how these values do not accommodate for the mobile devices virtual keyboard because the virtual keyboard is not considered browser UI....

CSS - iframe width and height problem

Hello, I have this site: https://gaab.42web.io/crochet/crochet.php Ideally, I would like to use CSS to set the width and height of the iframe. But I can't. When I delete the width and height attributes from the iframe tag and use CSS to set them, nothing happens....

Scroll Trapping

Hi all - hoping someone can help me crack this. I've searched around but haven't found a solid example or demo. Goal: Using CSS/HTML/JavaScript (Tailwind available but optional), I would like to achieve the following scroll behaviour: Initially the page scrolls normally....

Encapsulation, Inheritance, abstraction, polymorphism are not the pillars of oop?

That's a claim I have seen online. Why this belief even exists?

Outline being displayed outside of the margin

My understanding is that when applying an outline, it appears where a border would appear if none were present. I'm have a simple situation where I have an image and upon hover, I want to draw an outline outside of the image. The image has a small margin at the top and bottom. What I'm getting as a result is the border being displayed outside of the margin on the top and bottom. I'm finding this baffling. Thanks for any advice.

CSS Transition: ease-in-out? Seems to contain Left/Top/Right, but not Bottom (hah)

https://codepen.io/Laing91/pen/gbaBadR?editors=1100 my html and class naming is all over teh place, which might be the reason why this isn't working, anyway. i thought overflow:hidden on the image container, then transition on the image, and img:hover transform: scale(1.2) would've worked, but it seems to escape south....

Layout/aligning problem

Everything(layout) seems to align perfectly well but the elements inside the flexbox do not really match kevin solution image. i have tried to adjust it several times but no avail. https://codepen.io/Collins-Cypher/pen/KwdrMmy...

Question regarding operations button in tables

On Google drive when my files are listed in the table there is a small hamburger menu that on click pops up small card with some options like in the image. what exactly is this called, I am trying to replicate something similar on a table but I am having issues doing research because i am not sure what the exact name for this type of design is
No description

help me fit this in the viewport

Hey guys, I need help making the table container (the highlighted) element make use of the available height, and not grow, so it doesn't cause any overflow. Unless and until I give the container a fixed height, the overflow auto wouldn't work. I was thinking it would implicitly treat the 1fr as the max height, but it continues to grow.
No description

code structure helpppp

anyone know how to improve on code structure?my website have only html,css and java.HTML and CSS are my main concern tho its a whole mess with a bunch of elements constant overriding each other and i just name random shit to my classes name like nba1 or abr1

JavaScript topics to know before moving to react

Please are this JavaScript topics ok for me to learn react. I want to build a website with react that's why I am asking
No description

How do I build online multiplayer game?

I want to develop an online multiplayer game similar to Don't Starve, and I believe WebSockets will be essential. However, I'm unsure where to start and have no experience with WebSockets. Could you provide some suggestions or resource recommendations?