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

why font is not full screen ?

i want to make this font responsive and full screen by width how can i do it ? i have code pen attached https://codepen.io/kev00690/pen/zYgpNVV...

How to target the parent of selected text? Any workaround for ":has(::selection)"

I know, :has() does not work with pseudo-elements, but I like to style an element if it has parts of it selected. Just like :has(::selection) would do. Currently I am running a selectionchange handler on the document and check the list of parent candidates and attach a class "manually". But this should be doable with a css rule, right? Is there any workaround? Or is this planned to be implemented by the browsers?

Changing "accent-color" on radio button, changes color of space between border and inner circle?

First is how it shows on my end, second is how it should be. Any ideas what is making it change that small inner color?...
No description

How to Set Width of a New Container Element to Match an Existing Element's Width in JavaScript?

Iโ€™m working on a project where I need to dynamically create a new container element and append an existing element into it. My goal is to ensure that the new container element has the same width as the existing element, regardless of how that width is defined (e.g., auto, max-content, inline styles, or specific pixel values). here's what I have done done so far ```html...

is there a plug in for finding unused css class in visual code?

is there a plug in for finding unused css class in visual code?

pseudo element capabilities

Hey, is there anything that a pseudo element can't do that a normal element can? I know this is quite broad, but is there perhaps certain properties that wouldn't work on them etc? Thanks in advance.

Responsive nav bar without code duplication

I want to create responsive nav bar without code duplication and conditional rendering (jsx). What is general strategy to make it work? I attach picture of what I want to achieve. 1 - logo 2 - nav links...
No description

SEO-friendly HTML structure example

Hey there! I got a quick question on structuring my HTML especially on heading-levels. I have a design with eyebrow headings (basically a subtitle but above the title) so the eyebrow will be a h3 and the title a h2. Is it fine to place the h3 eyebrow above the h2 title inside my HTML structure? Or do I bother to do the following, since it brings me more benefits then flaws? ```html <div class="test">...

Sections overlapping

I'm trying to solve an issue where two sections overlap (both sections have fixed heights and flex), but I can't seem to understand why it's happening. This is the source code: https://github.com/GeorgeDash/br-f... ... and what it actually looks like (DevTools used):...

Wordpress Theme

Hello everyone, I have a colleague who asked me to create a website for a store, I usually work with Laravel but he wants something simple in Wordpress. I can edit the design, I installed the Botiga theme which is very clean and has Woocommerce which is what I want but the store page, I can only edit the products but the rest I can't do absolutely anything, I know there is a paid version But I found it strange that I can't even change the text, can anyone help me or advise me on a topic that giv...
No description

How can I easily get this grid with pushed down element on other column?

Pretty much title, I designed this in my Figma but now when coding I am stuck, I tried for 3 hours, googling and couldn't find any good results so you guys are my last resort โค๏ธ this is my try (code): ``html <section id="bistro" className={${paddingClasses} grid grid-cols-1 lg:items-center lg:grid-cols-2 gap-x-16 xl:gap-x-24 2xl:gap-x-48`}>...
No description

no matter what i try scroll won't go away

i tried to fix scroll like overflow hidden, scroll stops but the social media icons stays at bottom and can't be seen this is the codepen for it : https://codepen.io/kev00690/pen/zYgpNVV kindly tell me what i'm doing wrong....

Intermittent Section Reload/Glitch on Scroll in Next.js App

Hello everyone, Iโ€™m encountering an issue with my Next.js app where page sections initially load correctly, but after scrolling down and then scrolling back up, they glitch. The sections seem to reload with a brief white space, then appear in bits and parts before displaying fully again, even though the DOM is already loaded. I havenโ€™t implemented any dynamic reloading logic, and this happens in a way that disrupts smooth scrolling. Hereโ€™s a reference to two sites experiencing similar behavior: 1. https://thegrandregent.com/...

How to change live input for input="text"?

To be more specific, if a user is typing something, I need to slightly change his input after specific requirements are met. Requirements are these: 1)Input="text" needs to only take numbers. Nothing else is permitted. 2)If first character user enters is "0" nothing is shown in input field. 3)When he enters his 4th number, "," is auto added in front of the first digit. Ex: "1,000" 4)Every next number moves comma to the next digit Ex: "10,000" ; "100,000"...

px vs em/rem padding

Hey, i recently found out that using px for padding isn't necessarily a negative thing, especially if you don't want it to scale with text size. I also heard it shouldn't cause overflow but have found out otherwise, unless i'm doing something wrong? The first image is using em, the second is using px, and as you can see, the px causes the text to overflow. if i reduce the px value it somewhat fixes it however even if the value is larger i don't believe it should overflow? I'd appreciate any insight since i'd like to be able to get out of using em/rem for a lot of things haha. Thanks in advance. https://codepen.io/deerCabin/pen/mdNpbjZ...
No description

NEED FEEDBACK !! on FONT & Sentence.

i finished that site and i will appreciate the feedback on the sentence and font selection as this will stay there for around 1 or 1 and half month as i'm looking for job and my cv contains the website labeled as PORTFOLIO so whenever someone see it they should get pleased by it. PS: i don't know why i chose those typewriter fonts i thought they will look nice with black background. now i'm having second thoughts. if you guys have another design that i should be inspired from please feel free to attach that and thank you ๐Ÿ˜Š ....
No description

Looking for a free decent nba api, Node Hosting

Looking for a free NBA api. I found one but the option to select the one team section is not working. To much work to do to get the information I am currently looking for if I can even get one. I also use iPage and Bluehost, funny because bluehost is the parent company to iPage lol, and neither of them provide a free way to host NPM packages. So is there a similar hosting site to host my sites where I can use Node and NPM so I have a reason to learn REACT or VUE again. I don' t want to have to u...

Astro components

Is it possible to pass complex objects into astro components as props?