Kevin Powell - Community


Kevin Powell - Community

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







How can i improve this design more?

Do you have any suggestion for this design.

vertical centering

i am always getting stuck to align vertically at the center of the page,can anyone figure out to make it responsive

Expanding row that is being clipped

Hi all. I'm working on a project to bring a graphical display to Home Assistant's Assist virtual assistant. This has thrown me head first into the unknown world of CSS (for me). I am trying to modify some of the cards that Home Assistant provides to full screen views and am running into an issue....
No description

How can I scroll it from right to left like a wave?

I want to scroll it from right to left, but it should move like a wave. How can I do this, or is there any JavaScript plugin for it?
No description

justify-content vs margin auto

When centering horizontally is it better to use flexbox or margin auto? what are the factors that I should keep in mind

Navigating back to previous page

So i am trying to create a back button in a web app which s working fine using history.back() but the problem is if i copy paste the link and then i hit the back button the user will go back to the previous tab even if its not our domain. i want the user to go to home page if previous page is not a page from our hostname using react-router-dom for navigation ```javascript...
No description

How to make a responsive color design with image.

I am doing a frontend mentor project. There is a background-color for the nav and hero section. However, I do not know how to achieve that because nav is in the </header>, hero section is in the </main>, which I cannot apply a background-color-class, there is also margin between. I tried to use pseudo elements and absolute value, but it is just too hard to make it responsive. I tried applying it on body, but it will take up the whole site....
No description

How to responsively move elements from a row to a column with subgrid?

I am working on this front end mentor challenge. I’m using subgrid for the first time and it’s working beautifully to keep everything aligned. But it is supposed to be responsive so that on mobile it displays as a column of cards instead of a row. Normally I think I could do this but because I’m using subgrid, I’m not sure how to redefine the grid within the media query. How would I say that I want 3 primary rows (the cards) that should all be equally sized, each with 4 sub-rows within for each piece of info? I have it working-ish with repeat(auto-fit, minmax(200px, 1fr) for the columns but that causes one card to sometimes be alone on the bottom. Is there a way to avoid this? I also tried using container queries but I got confused about what to put where....
No description

Searching for a specific background clip/mask property

Hi, I've been searching for a specific property that would allow me to reveal a background behind some elements. Here's the tricky part, I have several divs that are following the user's mouse and are created/deleted dynamically (for an animation) I would like to be able to reveal a background hidden behind those divs (similar to a flashlight I suppose). I searched a bunch and stumbled upon masks which would be great except I have a pattern for a full screen background and as far as I understand masks need to be put on the parent (in this case the small divs which would ruin the background or force me to repeat the background inside those divs instead. If any of you know of a property that would help me with that it would be greatly appreciated. Many thanks! TLDR. I would like to reveal a background behind the "circles". Video of what the effect looks like for reference:

Any helpful resources for styling a search bar with an adjacent search button?

I'm still pretty early in my web dev journey but one thing I keep struggling with is styling a search bar with a button (either within a navigation bar or just in general) . I've tried looking at other people's CodePen's but I feel like I'm just copying and pasting and not learning how to do it myself. I'd appreciate any tutorials, tips, or any other resource that would be helpful regarding this topic. Thanks!

Creating a cart functionality

I'm currently creating this design ( and almost finished it but im stuck on the cart functionality part. I implemented the counter part where i can increment or decrement by clicking on the + and - . The goal is to get this value and put it in the shopping cart when the add to cart button is clicked.
I just dont really know how to create the cart itself , i've looked it up and the results are mostly different kind of cart functionalities. My first thoughts were that i create a div that's hidden but then gets visible when the cart icon is clicked but that's as far as i currently am. Im not aware on how to get all the info and pictures in the cart without statically adding them...

disable user agent view-transition root conditionally

Is there a way to disable the standard user agent view transition manually before updating the dom? I know I can do: ```css ::view-transition-group(root),...

Changing the color of a SVG image

My code is as follows: <div>` `<button class="modal-close"><img src="svg"></button>` </div`...

Weird layout shift with max-width

I have this dead simple code: Why does the horizontal position of the body change when I replace the image with text? The shift is subtle but noticeable and weird....

Adding table columns to a pure CSS Tree View

What's the issue? I have the following codepen: which uses this great <details>-<summary> trick to turn an ul into a tree view where you toggle items to hide/display them. I would like to introduce 2 more columns to this Tree View, i.e., the resulting table will have the expandable li and the second and third columns will have some value that should be aligned (and only show up if its respective li counterpart is toggled open ). To make simple to explain, I have attached a GIF explaining the approach. ...
No description

Why isn't border-radius working on my grid container ?

im well aware this code is ugly , im pretty new to all this. If html is needed, let me know. thanks *{ box-sizing:border-box; margin:0;...

Modal exit animation debugging

If I click outside this <dialog> and then press Esc, it shifts to the top of the screen while playing the exit animation. If I press Esc while still focused within the <dialog> it stays in place. Has anyone encountered this / found a solution? Codepen link:

Getting 'position: absolute' to be responsiveπŸ˜•

Yes, I am about to look at Kevin's video next(again). My problem is understanding position and images. But both together I am always stumped. Problem: the <svg> just happens to be an image. It looks fine now. Still not sure why. However, on smaller screens it keeps moving. Should I use media queries. Isn't there a better way? Thank for the help.

React grid generation

In react if I have a grid and I want to update a single cell when clicked on is it fine to re create the whole grid every time a cell is changed or only to update the state for that specific cell. The reason I'm asking this is because if I'm updating the whole grid the code will be less complex but if I'm updating only a single cell then the code would be more complex but will be more efficient