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

Position Sticky stops working, after I set a sibling element to Position Absolute

```html <header> <div class="logo"></div> <div class="header__links"></div> <nav class="nav"></nav>...

question regarding "key" in js

Ik this might seem a lil dumb but can someone explain to me why we use "key" in js or react as well

Even/odd row styling with CSS Grid and subgrid, is this a good idea?

For work, I needed some table styling and decided to use CSS Grid. Because I need even/odd row styling, I used subgrid. When searching online I couldn't find many solutions going this direction. I wrote a short post about it: https://appjeniksaan.nl/posts/table-row-styling-with-css-grid/ ```html <div class="table"> <div class="row">...

how to prevent last item of flex to grow

section {display:flex; flex-wrap:wrap; gap:1rem}
div {background-color:red; width:0; min-width: 100px; height: 100px; flex-grow: 1}
``
section {display:flex; flex-wrap:wrap; gap:1rem}
div {background-color:red; width:0; min-width: 100px; height: 100px; flex-grow: 1}
``
html...

Responsive Ideas

Hello there! Thank you in advance for your help. I've been working on a Weather API that I need to finish by tomorrow, but I've run into a slight issue. I want to make the website more responsive for mobile users, but I've honestly run out of ideas on how to make it look much nicer on a smaller screen. So, I'm reaching out to anyone who's skilled in these matters to see if they can possibly do something to enhance the design. Your assistance would be greatly appreciated. Thank you! https://codepen.io/hrphyn/pen/dyLYXVv...

Help me, help you, by helping me, so I don't ask so many questions(yep?)

Here's the site: https://anglian-online.netlify.app/ Here's the code: https://github.com/callum-laing/shopping-site My question? glad you asked. See image for a detailed explanation. I created a grid with 3 columns, I was expecting each column to host 1 image/card, however it appears each column is hosting 3 image/cards....
No description

Responsive Carousel (TailWind + JS)

Hello, I'm trying to build a responsive carousel. Ideally, what I'd like to happen is that the amount of visible products decreases based on screen size. (ie: web: 5, tablet: 3, phone: 2). I tried using Grid instead of flex, but I couldn't stop content from wrapping. Any ideas would be greatly appreciated. Here's my demo:...

Webpage CSS to make it be better on varying display size (responsive)

tell me where to start how to fix this , where to study this ,on varying display somethings get stacked overlayed distorted, messed up. Please suggest me best optimal way

Is my site layout saveable?

Two years ago I made a custom layout for my website. At a small scale it worked perfectly (only one page) but now the site is hard to navigate, the layout looks esoteric and there are too much elements (see the projects). I tried fixing it with making the background less bright and vibrant but I find that the site is still unpleasant to navigate. My question is: Should I make a complete style rework or can I fix the current style to make it more accessible? Here is the site: https://afghangoat.hu Any feedback is appreciated!...

simulating support for missing web apis?

Is there a way to simulate the lack of support for web apis in Firefox or Chrome? Like for example, deactivating the push api so I can test if my fallback properly triggers. I was hoping for a setting in about:config or something similar. For example, I have this line of code:...

Google search result name change

Changed the domain name recently from infotelligent to selling.com. I have changed the all the title tags, meta titles and description. But I can still see the old name in the search results, how can I change this?...
No description

If anyone can help and look at my Html & CSS

I'm trying this challenge and just wanted some help on my code and what I can improve on and avoid. 1 question I had is whether or not I'm supposed to make a container when using grid or just put a width on the grid itself. I found when using a container/wrapper over my grid some of the columns and rows overflow when the browser shrinks because as the browser shrinks the container gets smaller but my columns and rows might have a fixed unit when using minmax() so they overflow. Any advice on ho...
No description

Applying multiple classes, or targetting a google font class in NextJS

Anyone know how to do this? I've got the font working on my h1, but I don't know how to target it. You can't target "h1" in nextjs for some reason, so I need to give it a class... but I can't seem to add multiple classes to this element. ```js...

How to create a pointy triangle border?

The border of the social media icons. HTML: <div class="social1"> <span>SHARE</span> <img src="icon-facebook.svg">...
No description

aria-current or aria-selected ?

Should I use aria-current or aria-selected on the active profile subcategory (currently SKILLS) ? https://icodethis.com/submissions/71933...
No description

JS Form Two Submit Options

I have a form using has a ID and JS file listening to the submit method. I've got another JS code to change the ID field once the page is loaded. I'm then wanting to post that somewhere different. The issue is on page load the event listener is set on the first ID and even if I change it, that method is being called. How can I reset this?...

Is it possible to style a header like the album cover for Midnight Blue?

Well it's not an important issue, just wondering and having a go myself, but far from accomplishing it. It should be responsive on both device and font-size
Midnight blue cover

Flebox cards

Hello guys. I need help troubleshooting this weird behavior. On mobile I set the container to flex, justify space between and wrap. The the flex items set flex-basis: calc(50% - 20px) but some items stretches to 100%...
No description

is there a way to position absolute a scrollbar?

screenshot for a reference, i've added a overflow to scroll to the main panel of dashboard i dont want the side bar to scroll. but i want the scroll bar to be at the right corner of the screen position absolute isn't working. is there a work around...
No description