KPC

Kevin Powell - Community

A friendly place for developers to meet other devs, ask questions, get help, and just have a good time 🙂.

Join

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

Jochem

4/1/2025

FORUM MOVED

This forum is no longer in use, and will be archived. Please post new questions to #help

Dave

4/1/2025

CSS grid – filling the grid bottom up

Any help will be greatly appreciated (either solving the problem, or telling me that it can’t be done). I have a simple CSS grid (CSS class podcast__grid – see snippet below). The grid holds blocks, each block is an episode in a podcast. When adding blocks to the grid, they fill the top row and only when it’s full ( 4 blocks in Desktop breakpoint), they start to fill the row bellow it (Please see Illustration 1 – current outcome). I’m looking for a way to fill the grid bottom up – blocks fill the bottom row and then fill the row above it (Please see Illustration 2 – desired outcome). If it can’t be achieved using CSS, is there a solution using JavaScript?...

vince

4/1/2025

Ideas on how to position input placeholder

I'm trying to position this input placeholder centered vertically but I can't get it centered. The only thing that fixes it is removing the Franklin Gothic font I have on it. Is this just an issue of with the font face and nothing I can do about it? I've tried removing all properties on it already and nothing works...

Myra

4/1/2025

Notes App

Hi there! I'm trying to create a notes app using html, css and JavaScript. For now i have worked with html and css but here are a couple of issues • the tooltip for the plus icon of new notebooks button is not converting into lower case • also i have added the dark theme using the toggle button. For the light theme all the properties are working but when i toggle to dark theme. I have tried to change the colors of some properties but they are not changing. Some colors are changed like for the body bg,aside bg,new note btns bg colors are changed but when i try to change the search container and search field bg color they are not changing. Also when i hover over the new note btn, the moon icon and the plus icon of new notebooks btn their color are not changing ...

Ishmael

3/31/2025

I need Hero Slider Component

Does anyone knows where I can get them from?

Laegnur

3/31/2025

Compare height to another element height?

Hi. I'm using Kevin's code to create counter-rounded corners for my sidebar. But when the sidebar's height is greater than the main's height, the trick appears. Is there a way to compare the height of one element with another? I'd like to be able to apply some styles to the sidebar when it's larger, and others when it's smaller. This issue will be fixed when the page contains actual content and the main is larger, but I'd like to fix it when it isn't....

DanKaplanSES

3/30/2025

What does "child" refer to in the `nth-child` pseudo class?

I always use the nth-child pseudo class incorrectly on my first try because I infer it to mean "select the nth child of this element." e.g., If I wanted to select the second child of a container, this makes more sense to me: ```html...

vinter.

3/30/2025

Inline JSX components aren't preserving the whitespace in MDX

Hi, I have a static website that uses JSX components for inline elements. This is the HTML I'm returning: ```jsx export default function Component({text}) { return ( <a href="#" className="inline-block decoration-2 mb-1 nowrap">...

Dovah

3/29/2025

What do they mean by "focus" state here? (second picture with white background)

What do they mean by "focus" state? Is it tab-targeting? Hover? After I click it? And how would you go about achieving it?...

lko

3/29/2025

Can you create a carousel in a .container, but with visible overflow with plain CSS?

In swiper you can do this: https://codepen.io/Lko3001/pen/ByaqxZr So basically have some slides in side a container, but still have them overflow, is this possible to do with simple css?...

MeiFTW

3/29/2025

Popup Overflow Horizontally

I am not able to provide screenshots or code currently. To summarise, I was making a simple popup window for a website for their Privacy Policy. I put everything into proper dividers and used JavaScript for a darker background, etc. ...

Duckit69

3/29/2025

Styling in React

this is my first react project and i have a question regarding styling my webpages do i build html css ( seperatly and have an idea about what css classes i should have etc ) or build my react components and go from there...

Mehrab

3/28/2025

Heading tags in different parent elements?

Is it ok to use heading tags in different parents? For example inside the body tag we have two sections. In first one we have a h1 tag and in second one we have a h2 tag. ``` <body> <section>...

MC23

3/28/2025

Styling complex/dynamic element

I have an element that might or not have a checkbox above, and that might or not have a description that will go on two rows, what's the best approach in styling such a thing? I'm trying flex, but since the number of flex item is dynamic it doesn't work too well

chikanlegbees

3/28/2025

Issue with scrolling on mobile even after height is viewport height ! Likely address bar issue

So I’ve got 2 videos I’m gonna send below first one is from the dev tools in mobile view so that doesn’t account for the address bar we have in chrome mobile layouts Second one is a screen recording of the app from mobile browser so address bar is present on that one Now the issue is my app page is set to full vh so 100vh right… and that means there’s shouldn’t be any scroll bars when the page loads as the page is just the viewport height and not more ...

Myra

3/27/2025

Toggle switch not working

Hello, I'm trying to create a clock with light and dark mode but there is an issue in it light mode is working correctly but when toggle to dark mode the theme is not changing correctly. The body bg color is not changing fully and the clock container also not changing according to theme Here is the code link https://github.com/Myragull/Digital-Clock And preview https://myragull.github.io/Digital-Clock/...

Eduardo Carneiro

3/27/2025

flex

I am using vuetify with flexbox and columns with their breakpoints. There is 5 divs inside. They are all at the same row. When the breakpoint is "lg" or above, they all have no number of columns defined. When the screen is a little smaller the last one goes down and grows to the size of the entire row. What i am trying to do is, when there is no space available for all of them, the first one goes up and its size goes to 100% of its line. The other ones stay at same line together...

Myra

3/26/2025

Digital clock

Hello! I'm trying to create a digital clock but there are a few issues in it • the first one is that the seconds kept going from 1 to infinity to stop that i have put a condition to stop the seconds at 60 but after 60 they aren't starting from 1 when the page refreshes than it happens • also the minutes are not updating when 60sec are completing ...

Zdeňa Svěrák

3/25/2025

Boilerplate - Vite + React + Typescript + SASS

Hi guys, I have recently quit my frontend job as the environment was super toxic and I need to build some projects. I'm looking for some solid boilerplate (vite - react - typescript - sass) so I don't have to spend a lot of time just building the structure. Continously if somebody has some good sass file sources (for example for using @include media('>=lg') for responsive) Thank you so so much guys! 🫶...

jack_23011

3/25/2025

how to fix flex-direction: column; alignment here

.intro__area { grid-column: span 6; display: flex; flex-direction: column; gap: 2rem;...

Gaming

Programming

Kevin Powell - Community

A friendly place for developers to meet other devs, ask questions, get help, and just have a good time 🙂.

Kevin Powell - Community

A friendly place for developers to meet other devs, ask questions, get help, and just have a good time 🙂.