KPC

Kevin Powell - Community

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

Join

KPC

Kevin Powell - Community

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

Join

Channels

front-end

resources

back-end

ui-ux

os-and-tools

MMetanoia

5/14/2024

js/react with postgresql

https://gist.github.com/deahlt/af8174390490dc9e61758b6347d69a9c im getting error 'order not found' and 'invalid order id' because of invalid Order ID format (it mistakes user id for order id), for example: Received user ID: 6643958de7980e98dda15b8f Parsed Order ID: 6643958 No order found with ID: 664395...

Vvachito

5/14/2024

animation scroll replace gsap

I need to know how to replace this done with gsap to native css, using animation scroll, who can help me? useGSAP( () => { gsap.to(".firstWord", {...

Jjay_volk

5/14/2024

Advice on best way to do equal height on this

https://sflece.net/ -- looking for some advice on this (the coming soon area).... I wanted to have the image/ece/nonprofit text equal in height to Coming Soon, bottom text area. I went with Grid, but had to use JavaScript to get equal heights on resize... what's a better/right way to do this? As you can see it's a mix of images and text and needs to be responsive...(long time listener, first time requestor of help)

Ssnxxwyy

5/14/2024

Activating label to check a checkbox by pressing enter

Hey, clicking a label linked to a checkbox checks and unchecks the checkbox however if the label is tabbed on and you press enter it doesn't activate. When you do this on an a tag for example it works perfectly okay, how do i make this function work on a label? Many thanks.

CcssBee

5/14/2024

issue in front end mentor challenge: product-preview-card

i build the front end mentor challenge: product-preview-card-component-main https://www.frontendmentor.io/challenges/product-preview-card-component-GO7UmttRfa but i have an issue with spacing (screenshot), i knew it come because of the height of image but how to fix that? this is the code : https://codepen.io/css-Bee/pen/abrOwWG...

HHeisenberg

5/14/2024

Help: How to make something from an iframe stick to the bottom of the parent page?

Hi all, I am trying to solve a particular problem. I have a button on a page which has a property position: fixed, bottom:0 ...

Aasasinmode

5/14/2024

Min height of content, preferred of screen with max

I'm making a landing page and I want the first section to take up full screen (or more if needed for content and padding) but also have some kind of max height, it can be a fixed number or something related to screen width if it works (like max-height: 150vw) but at the moment I can't come up with anything. I made a codepen and at the moment it has min-height: 100vh on the first section and in screenshot 1 you can see it works as intended, it also grows to more than 100vh if the screen is smaller than content+padding. However, if I zoom out (screenshot 2) then it still takes up all of the screen (as expected with 100vh) and I really don't want that to happen. Is there a way to do that? I tried something like height: clamp(???, 100vh, 2000px) but I'm not sure what should go into the first argument of clamp, like ideally I'd want something like fit-content but it doesn't work....

DD4VI00✩

5/14/2024

CSS Height Control

I'm having trouble to center everything equally in a grid. For example images or short texts can break the entire flow. What could be the best solution to have everything equal even if the images are short or we have less text compare to others?

HHonded

5/14/2024

Wordpress - Display text dynamically based on URL parameters on Astra template with elementor

I'm using the Astra Theme, I picked one of their starter templates and I'm editing it with Elementor. I would like to add a text to the template that says "Welcome John" where John Doe is replaced by a parameter name that I pass in the URL, how can I do this? Is there a better approach to displaying a dynamic name onto a template? Example: if the link is mywebsite.com/?name='Mike' then the text will be "Welcome Mike" just like what's shown on this video [https://www.youtube.com/watch?v=BskYG-y_t8E] I'm building an invitation so that's why I require each invitation to have the name of the guest. Thanks for any help!...

Vvince

5/13/2024

How do I go about this design?

No codepen because not sure where to start. I was thinking maybe exporting the circles as an svg and using the path as a clip-path? But if I do that, then the green circle on the left would need to be in the image or absolutely positioned on it so not sure how well that would work

JLJono Lewarne

5/13/2024

slick slider containment issue

I'm being a complete dunce here and cannot for the life of me get the images inside this slick slider carousel to be contained inside the fixed height parent div. Can anyone point me in the direction of a fix please? https://codepen.io/mrjonoces/pen/eYamwRy...

Rroger

5/13/2024

how can we do it?

Is there any way of achieving this line in between as a progress using html css

AAxim

5/13/2024

mousedown event set on parent but keeps getting child element

Basically the title, when having the mousedown event on a parent I only want the target to be the parent wherever I click on the parent but Im getting the child as the target when clicking even though there's no event set on the child. Here's a jsbin to illustrate it: https://jsbin.com/bopoboqire/edit?html,css,js,output ...

JJoao

5/13/2024

CSS pattern matching

Hey everyone, I'm curious if there's a way to apply pattern matching when selecting elements using CSS. In particular, I want to target anchor elements that contain a particular word in their href attribute, for example:

a[href="*keyword*"] {}

a[href="*keyword*"] {}

This doesn't work, but the idea is that if the word "keyword" appears in the attribute "href" it would select this element. Is this possible, or is there something equivalent to this?...

AAli

5/13/2024

Copied a hover effect but is not the same as the original

original: https://fossheim.io/ button label: collaborate Playground: https://play.tailwindcss.com/ye0B1eQNlY...

Kkolarse

5/13/2024

Tracking scripts failing on deployment

Hi all, Not really something I've messed about with but I keep trying to add tracking scripts to a site and they keep failing. Running locally gets this error:

Uncaught TypeError: Cannot set properties of undefined (setting 'q')...

Tthis_is_dhananjay

5/13/2024

Help with JS logic to close menu if search is clicked, or vice-versa

Hello everyone, I am currently working on my own website and have stumbled upon an issue with the functionality of mobile menu and search toggles in the site header. Here is the link to a pen of my current code: https://codepen.io/is_dhananjay/pen/yLWyYjK...

Ooz

5/13/2024

Nextjs Multi layout setup

Is there a standard way to handle multiple view ui changes in nextjs app dir. I would like to conditionally render a basic / advanced view on a page based on user's choice should I use route groups for each route to handle this setup...

NWNiklas Westman

5/13/2024

Positioning last div at end, when using flex and flex-wrap

Hi! See screenshot for reference. I'm banging my head against this one. I have a flex container with flex-wrap enabled. I want the last button (class "close-button") to show at the bottom right corner of the flex-container. The number of buttons in the container can be anything. ...

☢♬ ŕΔĻ𝔭ᕼ__ј𝐚𝓃 👽☹

5/13/2024

Dark Mode

I have a simple question, when the user on his phone or laptop has his dark mode option on ... Is there a way it doesn't affect the colors on my website?