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

Importing Custom Fonts (CSS)

Hello, I'm trying to import a custom font for my project. ``` @font-face {...

How to center this text?

I am using flex box here. the parent element has justify-content: space-between. I want to center "jdemy" text how to do that?

Why is the height of my body 0px?

I'm playing around with a personality type scoring interface. For some reason, the <body> and #root (it's a Next.js app) have a calculated height of 0px. https://bafybeigigh6p2fcpfqmck32vkpi3i3akknmh5sbabtvupbiknfzqrkw4ha.ipfs.w3s.link/ Anyone have any suggestions?...

Need help with design

i want the purple background color button to be same as in the image .the width of the line is more than the width of other elements . Whenever i use max-width to give width to the element it does not have any effect on the line i am unable to increase the size of the line . i can do it with using width but then i am unable to give margin. Check out my website"https://talhamustafa1.github.io/Age-Calculator-using-javascript/"

making custom video components

anyone know how i can make a styled component that works with youtube links? or ig more broad how can i store a video and then with a fetch request get the video to style. the ideal route would be youtube as then i can just store a youtube link in the db rather than some file to manage

responsive issue/bug

Hey so I am trying to solve a bug fix on my agencies website. It works well on safari and other extensions but glitches terribly on the social media sites such as instagram. I narrowed down the problem to be a vector svg but i have no clue how to fix it. It make a white block come up out of nowhere and messes up the scrolling. The svg has a class name "vector3"...

Query about Layout Creation and Structure using HTML & CSS

Hi Friends! I hope you all are doing well and having a great day I am proficient with HTML & CSS. but, I needed to know how professionally and creatively i can achieve the layout given below...

how to make react website responsive?

I have made the main functionality n design of this ecommerce website writing in react and scss. What methods could I use to make it responsive as a beginner? without or with a css library (tailwind or MUI preferred). I have some knowledge abt making it responsive in css n some js. Any methods recommedation? Any tutorials or articals? Thanks! https://github.com/safak/youtube2022/tree/ecommerce/client...

Trigger animation immediately with Flackr's Scroll Timeline Polyfill

Hi! I am trying to create an animation of text shrinking to 1 character. But the animation only get triggered when the text element reaches the top (0% in CSS). I want the text to shrink immediately when I start scrolling. The JavaScript looks like this: ``` document.addEventListener("DOMContentLoaded", init); ...

make parent container fit video child

i have a video wrapped witha container. the video has a set size. is there any way to make the container expand its height to match the video? the video is overflowing the container right now or is this improper css...

Responsive issue

While working on responsiveness of website . most of my content hides do not know why and it shows some part of the webpage.Check the repo of code "https://github.com/TalhaMustafa1/Age-Calculator-using-javascript.git"

Webapp settings

Would you have settings in a json object in a single store or a separate store writable for each setting?

Disconnect between attribute and CSS selector – styles are not implemented as expected.

I just got some amazing help to add an id attribute to an elelement in a react component, but now that I want to add some styling the selector doesn't seem to affect the element: I'm using this video as inspiration, and want the header element to fade out when it gets id scrolling added on scrolling. https://www.youtube.com/watch?v=V-CBdlfCPic React component:...

Adding id to element on scroll using react hooks useInView and useID in nextjs.13

Right ... so the title might be a bit daunting, but I think this is actually just some plain JS at the end of it. But I'm stuck here now ... In this code you see two react hooks, useInView and useID, being used to listen for scroll behaviour and adding an id to an element: ```ts import { useInView } from 'react-intersection-observer';...

How to implement react email to an existing react project through resend?

I've been building my portfolio for the past few weeks and I wanted to implement an email automation upon form submission. Instead of using Email.js, I wanted to try react email. I tried exploring this since yesterday but I can't seem to make it work. Can someone explain to me how to implement react email to an existing react project through Resend? I already installed react-email, resend and react-email/components dependencies....

One and two level CSS menu

I've been tasked with making a more swish looking menu for a quite old web app at work. One of the things I've tried is using https://codepen.io/kevinpowell/pen/apxoJX as a starting point. What I am trying to do is have a sometimes multi tiered menu. Imagine a menu structure: Foo -> Foo 1, Foo 2, Foo 3; Bar -> Bar 1, Bar 2, Bar 3; Baz -> Baz 1 -> Baz 1A, Baz 2A, Baz 3A, Baz 2 -> Baz 2A, Baz 2B, etc. Foo, Bar, Baz is set up as a horizontal menu, Baz1, Baz2 is a horizontal menu, everything else is vertical. I have got it to bring up the "second level" stuff, whether that is the vertical menu or the horizontal submenu. However, the third level menu does not want to appear. I'm probably missing something quite simple, but I'm at that point of not knowing what I don't know....

i need some help making a food blog

hey i need some help in selecting colors for my food blog and i posted a grid question right ? so will that be enough or pls suggest something good pls

How to make this animation or keyword to research?

I'm trying to make my website logo like the website https://e-money.com/ logo. As you scroll down, a text moves to the left, fades away. I need a keyword to research this animation

border radius is not working on Border-image-source

I'm trying apply gradient to border. Even if i apply border to wrapper or the gradient-image, border is not working. how should i solve this https://codepen.io/ahad4387/pen/RwqMJom...

Overflow-auto not showing all content

I have a tablist and I have it to overflow auto however it does not scroll to show all the content ```html <div role="tablist" aria-orientation="horizontal" class="tablist" tabindex="0" data-orientation="horizontal" style="outline: none;"> ...