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

em scope in @media and @container

Am I remembering correctly that in an @media query, using ems or rems e.g. @media (min-width: 50rem) or @media (min-width: 50em) is referring the browsers font-size, even if you've changed your html font-size to something like 62.5% , its still using 1rem = 16px and 1em=16px; but within a container query @container(min-width: 50rem) or @container(min-width: 50em) rem is referring to what youve defined as your root font-size (so if you've changed your ```css :root {font-size: 62.5%;}...

How to align 0..N items to start and 1 to end, with flex?

I want an item always aligned to the end, while any previous item should be aligned to the start. How can I do that, with flex?...
No description

How to avoid text to wrap when there's space, using flex or grid?

I want the author to be on the left, the category on the right. If the container is wide enough, the text should not wrap. The two elements (author and category) may wrap on small screens (flex-flow: row wrap I guess?)....
No description

Scale animation with CSS Grid causes pixel gap issues

I have a weird one for you all... it seems that animating the scale while using CSS grid, causes the browser not to calculate the widths quite properly and if you have a 1px gap between the grid items the gap will come in and out as you resize the window You can see it in action here: https://codepen.io/LanFeusT/pen/RwzGVWK try resizing the browser window and you'll see the grid at the top which has the entrance animation will have the gap: 1px come in and out whereas the bottom one the gap is always visible Outside of animating something else than scale (translate for example) I don't really see another solution?...
No description

How to make a child element fixed but in the same time relative

Hello, I have one very big problem. I have nav in a div and should make it sticky when scroll trough the page, but the nav should not leave its parent div, but the div should stays in place. ​​The div is a parent of some children, the nav is one of them. I want to keep the functionality where the nav is positioned based on the parent div styles, but also want when I scroll, only the navmove

Overlay on a div with a certain cutout in the middle.

Actually this is on top of a video stream but for simplicity sake lets just say its over a div. I am trying to create a verification system where the user can verify themselves using facial verification. For the design part I need to display a face cutout overlay on my video stream essentially telling the user to place their face in the cutout to verify themselves. What is the best possible approach to this? I have provided an image of what I am trying to achieve but for web. ...
No description

How can i apply overlay for the design at bigger screen sizes ?

Hello, I did apply the overlay for the design at mobile screen sizes, but when it comes to bigger screens i can't, i searched Chatgpt, reddit, stackoverflow, and found nothing, repository: https://github.com/WaelBenseghir/stat-page demo Url:...
No description

Ideas required

Hiiiii. I started a personal project. Where I want to show data on a monthly view like the image attached.What I want to do is show each people's info on the monthly calendar in a row according to the dates. I am posting data on the DB but how do I show it like this. Looking for ideas...
No description

nextjs server actions return undefined

Here is my code, the problem I encountered when calling server actions in the client component. The returned result is undefined
No description

Replicating Android Clock

Hello everyone, would it be possible to have some pointers regarding how to begin making something like this in React? The bottom div containing the times for various locations appears to be moveable. And the content of the div at the top fades relative to the position of the bottom div. If the bottom div reaches a certain threshold height then it collapses either to the top or to the bottom....

Responsive Layout

Why i got this layout crashed is it because of styling of web fault this happens rarely and then it is fixed by it-self https://94h77v-5173.csb.app/...
No description

Button with gradient

Hi Everyone! Please could I have some help on how I can achieve something like this. For context, I am using bulma and sass but I dont mind if there is a vanilla css solution. Thank you. ``` css .button{...
No description

:focus is the same as :focus-visible

How can I make this work?
<input type="text">
<input type="text">
```css...

How to disable view transitions on elements when I'm animating in startViewTransition?

So, I have view-transition-name here and there on various elements of my content, so that when I move from page to page they transition nicely and all. I just added an intra-page view transition on my theme-toggling button so that when I switch between light and dark, the new color scheme appears to reveal itself from the button. It works well, except the elements that have a view-transition toggle between light/dark immediately, which results in flicker in those elements: the element changes its colors to match the new color palette while on the page with the old theme, so it's basically invisible until the area with the new theme applied expands to cover it....

Bootstrap button color not overriding.

I am trying to customize bootstrap button with scss
the problem though is when i set $primary variable the variables like $btn-link-color and $btn-link-hover-color is not working, i had set the primary color to #ffb600 (yellowish color) the text inside the btn-primary becomes black but i want it white also i want on hover the background to be black and text should be that primary color (yellowish)...

What are the most common and important purposes/uses of subgrid?

Hey, what are the most common and important purposes/uses of subgrid? Two that i know of are making content the same size to align buttons to the end of cards and organizing content into their respected tags e.g. elements that should be in a main tag for a project but individually need to be in different columns don't need to be a direct child of the main grid. Ohter than that i'm not too sure of any others. I'd appreciate any insight, thanks in advance.

Automatic scroll with MUI Appbar

Hello all, I implemented a MUI AppBar at the bottom of my page with a Toolbar inside it, because I need a toolbar that remains sticky at the bottom of the page as the user scrolls. The code looks like this. If you notice where my cursor is, when I press enter, the cursor falls out of view until I scroll down again. This is not a huge deal, but is there a way to also automatically cause the page to scroll when the user presses enter to create a new line? ```<AppBar position="fixed" sx={{ top: "auto",...
No description

Customizing editor experience

Hello everyone, I’m working on a e-book maker app where the main feature is a rich text editor inside which authors can write book drafts. I would like to customize the look of the editing experience. Right now, I’m not applying any custom styling to the nodes (h1, h2, …, ul, ol, code, pre, etc.) inside the editor (see screenshot to see what is currently rendered). In order to do that, I would need to pick a custom font, custom spacing between headers, etc. I’m not very experienced with the fro...
No description

native CSS nesting

Hello everyone, I would like to rewrite this CSS to implement it instead with native CSS nesting. My question is if that's smart to do so; it CSS nesting supported yet by all major browsers? ``` /* Editor container styles */ .tiptap {...
Next