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

one sided slanted button

Whats the cleanest way to achieve this design? I want to be able to make it responsive no matter how tall the button is.
No description

1px separation between two divs

The div that contains the absolutely positioned wave svgs has no set height. The contact section below has no set height. Zooming in and out shows it if it's not showing itself already. Sometimes just scrolling makes it pop out. ...
No description

How do i center the logo and the nav items perfectly

how do i center my logo and my nav list perfectly in mobile mode, and what is causing that extra spacing on the logo? https://codepen.io/Adhurim-Gashi/pen/PoryKxQ...

Using media query with each property

Suppose I have a div which is to be displayed only above lg screens. I have a button inside that div. Should I use lg with each property of the button or not? ```html <div className="hidden lg:block"> <button className="text-white w-max hover:bg-green-800 py-4 px-6 rounded-md"> Contact sales...

Styled File Input Keyboard Accessible

How do I make this file input keyboard accessible without using js. Codepen: https://codepen.io/Arslan-Akbar/pen/OJeBMLp...

Weird browser lag while animation runs

Hi! I've been fiddling with css animations recently and when the animation starts and ends theres a weird lag. Here is the link to the website! Do let me know the cause of the problem, thanks! (I've used transform: translate() btw) https://floralwhite-goldfinch-146588.hostingersite.com...

Problem with Imgage not filling in space is caused by padding

So I am struggling with this problem and I believe it has something to do with the <picture></picture> element because without it there is no problem. Still, I am using this element because I want the image to change to another at different screen sizes. I have tried a lot of solutions and can't figure it out any help would be highly appreciated ❤️ ```<picture class="card__pic-img"> <source srcset="/images/image-product-mobile.jpg" media="(max-width: 600px)"...
No description

How do you manage elements on the edge of the screen / out of the grid as screen scale up

I’m curious about how you handle situations where a designer places elements on the design mockup right on the edge of the screen / out of the grid. This positioning might work well a specific screen size, or on smaller screens, but as the screen size increases, it can lead to awkward or unintended placements. For instance, putting a max-width helps control the layout, but it doesn’t always align perfectly with the design intentions... I’m interested in hearing how you approach this—do you have any go-to strategies or techniques for keeping elements well-positioned as screens grow? let me show you some exemple of what i mean with the images :...
No description

does anyone know CSS grid well?

I am trying to arrange my project using the CSS grid , but I am failing miserably ! The first image is how I wanted it to be , and the second is my image , I can share the code via dm , can't share here , please if you know grid , help me out... #front-end...
No description

How to make 1 row with columns that are resizable in width by the users?

Here are some criteria to help you understand what I want. A layout with 1 row and X number of columns. The initial width of the columns should be based on its content. The user should be able to resize the widths of the columns. All columns have a min-width that should be respected....
No description

Container Queries in Grid environment

I know that you need to add a wrapper to grid items that is the container for an item to adapt to the track size of a grid when using container queries. I’m wondering if anyone knows of any methods to avoid needing to add this containing element and use the track itself as the container?
I’m not hopefully but wondering if anyone knows of something I’ve not seen before....

I was to have a dialog automatically show up over my hero section (i.e. announcement).

What's it called? And does Kevin have a video on it? Or maybe point me to some examples. Thanks Phil...

findIndex()

can anyone explain findIndex in js how is the workflow in brief.

Need Help Creating a Dynamic Mega Menu in Angular

Hey everyone, I’m looking to create a dynamic mega menu using Angular, and I'm a bit confused about how to approach the styling and structure. Specifically, I want the navigation links to be dynamic, so that an admin can decide whether a link is a regular navigation link, a part of the mega menu, or a standalone menu item. If a link doesn’t have any content, it should simply function as a regular navigation link that directs the user to a specific page. Could anyone provide some guidance or share examples of how to build this kind of dynamic mega menu in Angular? Any tips or code samples would be greatly appreciated!...

How should i make it?

hello there i have this design by default text collapsed when icon get clicked its getting bigger with scrollbar if needed i have couple big questions: 1) idk how to make it better with grid/flex? and just left some space or even use pos relative...
No description

How would you approach and structure this input in an accessible way?

Hi everyone, hope you're doing well! 🙂 I'm struggling to find a good way to structure this input, which is a dropdown but it also has a searchbar in it. I've thougth of different ways to structure it, taking in accout keyboard navigation and screen readers. It's part of a search form, where there are other two inputs like this and they are consecutives (what I mean is that you cannot open the second and the third if you didn't select an option from the first one, and so on for the other two)...
No description

want to design copy to clipboard functionality works everywhere except on apple products.

Summary: I'm trying to use navigator.clipboard.writeText(message) inbuilt function of JS, This works fine on all devices except mac. I've asked all my colleagues who have apple devices and when they try to use copyToClipboard it does nothing nor shows any error. In baseline it shows navigator.clipboard is universally acceptable function. Information:...

Nth instance of a has selector

I have a table with a class of table. I also have some table rows (tr) that have a header (th) that has a row span. I am trying to have alternating stripes on the tr’s that have a th child. ```html <table class="table"> <thead>...