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

How to force parent grid to flow when nested grid content overflows

Is there a property I can give the parent grid to stop this from happening?
No description

Clip a image given xyhw

I have a spritesheet like image, and I only want to show a certain part of it. I have the top, left, height and width of this part within the image, and I want the image to be 1em wide (this is different than the pixel width of the clipped section). The image() function with the xyhw seems like what I want, but it's not supported in browsers yet. How do I do this?...

POST request is not shortening links in my project

Hello, please I need help with my project, it’s a URL shorter. I'm trying to get the shortened links to show but when I submit there’s no shortened link. Please how do I solve this? Live project : https://url-shortner-delta-nine.vercel.app/ Github link : https://github.com/kenekc18/URL_Shortner

How do I shorten this code?

https://jsfiddle.net/sf6zdx9p/1/ From lines 9-32 I have conditions for each index of the li that is clicked to either remove or add an active class to that list item as well as the corresponding review in the container above that matches its index. I am looking to shorten that into less code with a function, but I am not sure how....

My sticky nav bar not sticking and out of position

I want the nav to be on top of the upper part of the background, yet I want it to be sticky as well. I tried moving the nav inside of the hero section, but that only allowed it to stick to the hero section, and then after scrolling past there, it disappeared. What is the most responsive solution to this. Thank you! https://codepen.io/Donald-Rankin/pen/NWJqaVb...

How do I make this grid?

How do I make this grid? The image on the left is taking up most of the space, and the other two items on the right are fitting in, respecting the height generated by the first image.

good and free 3d models for threejs + inspiration

Currently building a threejs react website where I am experimenting with 3d models in threejs. Do you guys have any inspiration what the setting should be? I tried a space theme, but I am not 100% what I can put there. Also, is there any site that provides great (animated) 3d models. Sketchfab is one site but I wonder if there are others

responsive grid react window

I have grid container with row and col is dynamic from data serting I render list of card I want to virtualise this list with grid list of react window or birtuoso But the problem is lost responsive and. All card not showned correctly Who have ide to reponsive grid virtualization...

A Problem With Setting The <main> Content To Full Viewport!

I have a page where I was having problems with setting the navbar at the top of the viewport. I was able to fix it with setting the border-top to some 20px whenever you load the site so that the <main> content doesn't overlap with the navbar. Now in the navbar I have two links which link to the 2 sections in the <main>! Whenever I click one link the <main> overlaps the navbar which is something I don't want. I want whenver you click the link the <section> / <main> stays below the navbar as intended and doesn't overlap the navbar content. I have a link to the codepen to see the full code. Try loading the website in the browser & notice how <main> content is below the navbar as intended but whenever you click the "work" link in the navbar the content of the <main> it overlaps. [https://codepen.io/inalelub/pen/QWobwRW]...

Needed help regarding Next Js and shadcn UI

Can anybody tell me that how I can handle active state of navbar element in next js or shadcn library. Just like we can do in Link component of react router using active props. But I want to ask that how I can do this in next js or shadcn....

How to stop sentence from breaking before certain words?

I have a set of category titles that all have the Unicode character fora down arrow at the end of the title. What I would like to do, somehow, is that as the divs that the titles are in shrink the titles are broken up from a single line to multiple lines EXCEPT for the Unicode character. I want that to always be on the same line as the last word of the title. Here is the HTML and relevant CSS: ```<body> <header id="siteHeader"> <nav id="siteNavigation">...

Question regarding Alpine.js

I need to implement a third party newsletter subscriber form and those docs tell me, that when I want a custom success callback, I would need to implement this: ``` <script type="text/javascript"> function mySubscribeSuccess( form ) {...

Why is my footer (sometimes) behind my other content?

I'm trying to force my footer to the bottom of the page, on pages with little content this works fine (using flexbox) but pages with long content the footer is displayed behind some of the content?

why is this happening ? how can i make it stop. i want that pyramid to be half show on full screen.

Everything is so big and i used the values same as my figma design but still. i have this background image it should show 50% of it in full desktop mode and should be sticking to right side all the time and when it comes to mobile and tablet screens then it should show 20 to 30% only...

instagram api

Im trying to build a search function on my page so that a user can search for their instagram profile and get their profile information without logging in i have seen other platforms implement a similar feature but after reading the documentation on the graph api and basic display api the functionality is not available from the official api’s meta provides i am wondering if this is being done using bots and web scraping and if anyone has done this before or has a clue on how to do it… below is an example of the functionality i am trying to achieve https://www.youtube.com/watch?v=TcEzmIYi2Jg...

How do I recreate this line?

So I am currently trying to recreate websites to test my (awful) knowledege in CSS/HTML despite learning for months I wanted to know how I can recreate that line looking thing shown under the header

array object remove

Hey, I'd like some help I've been trying things for the past 30 mins and I jsut can't figure it out! I've completely made the add, create, delete functions they all work as they are supposed to...

Nav Links not showing on screens larger than 768px

They only show when I toggle the button on the mobile view and then switch back to normal view. ./components/Header.tsx...

Doubt in the semantics of the website

Guys, I'm in doubt regarding the semantics of the website, should this first part (the hero section) be inside a <header> or inside the main content (<main>)?