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

Transition duration not working

Hello all, I'm having a problem with my css, the transition duration is not working. I'd like help on this problem. https://zod-codes.github.io/k-p-community/ (this is meant to be the finished product). https://github.com/zod-codes/k-p-community/tree/main/SPACE-TOURISM-WEBSITE (here's the link for the repo ).

frontend table challenge

hey guys, simple but imo hard challenge: how to build this kind of layout ONLY with table/tr/td no position property...
No description

Find Dimensions of frontendmentor design without pro

When tackling a Frontend Mentor challenge without a pro membership, figuring out the height, width, margins, and border-radius can be challenging. Often, you have to rely on your eyes and make educated guesses. However, here's a handy trick: open the design preview image in your browser, enter inspect mode, and add a simple HTML element to the body. Set its style to position: absolute and adjust height, width, top, left, or inset to easily determine the dimensions of any component in the design. In the video, I demonstrate how playing with these properties allows you to accurately find the dimensions of various elements. Additionally, if you need to pinpoint the exact color, use the browser's built-in color picker in inspect mode. Remember, as a coder, you have the power to overcome challenges and achieve precise results. Watch the video to see this trick in action and enhance your Frontend Mentor experience!...

Unused CSS and JS Files

Hi there, I have a style.css, what if I want to check which classes are not used and have no use in the style sheet how could I find it? And same for JS files/...

Need help with text alignment on different browsers

For some reason my Call to Action text align's differently on Firefox, it align perfectly on Chrome, Edge, DuckDuck Go, but on Firefox the bottom line is positionned a couple of px to the right. (See screenshots) Any fix suggestions? Thanks...
No description

px and accessibility

Hey folks I came across this component library by radix called @radix-ui/themes they use px for most of the css property like font-size isn't px bad for accessibility or am I missing something

Having issues with padding overflow in CSS grid display

Hi, I am having some issues with a grid layout I am working on. I am using subgrids to even out column widths when there are multiple columns of different widths. (I use the same layout for multiple pages) I have a pretty standard table style layout with details about addresses and links to contacts associated to the address. The problem I am having is that the padding on the contacts is overflowing. ...
No description

HTML content desplaced when main menu is opened

Hi there folks 👋🏼 I have a main menu with several levels. To open the second level and display its items, you have to click on the first level. At that moment, a shape transparent white layer appears, and over this layer the menu displayed. The page has vertical scroll, to avoid scrolling with the menu displayed, an "overflow: hidden;" is added to the <body> when the menu is open. As you can see in the image, this causes the content to scroll a bit horizontally, causing a very annoying effect. Do you know how I can avoid this annoying effect? Thanks a lot!...
No description

Styling using tailwindCSS and React JS

Greetings! Can anyone tell me why my close menu image won't show up after I toggle my menu image? PS- its functionality is correct maybe just the styling....
No description

Scroll reactive marquee made using GSAP not working

I am trying to create a scroll marquee, but the string does not repeat until it exits the viewport ```let currentScroll = 0; let isScrollingDown = true; let tween = gsap.to(".marquee__part", { xPercent: -100,...
No description

Angular Change Detection

```ts // component 1 <button (click)="open()">Click</button> // 1 ts...

Changr png , jpg to Webp in Wordpress

I want to change jpg png to webp in bulk for free on wordpress, is there any plugin for this? i.e in bulk for free

Help Regarding Google fonts in SASS

Can I Import Google fonts in a SASS module and then forward it for use in any other .scss file? In other words, how to re-export google fonts from a .scss file?...

Can we force a '%' value to be out of height instead of width ?

Hi there ! I am trying to position a fixed element using percentages (to keep them fixed within their containers). In need to position it to the right of my container, and at 50% height. But... As you can see in the screenshots 1 and 2, the right item (the horrible red-blue-white-gremlin) gets a top margin relative to container's width. ...
No description

What will be your approach for this UI

I get the design for one of my friend, and confuse how to design the hero section. I kindly request you all please suggest me your opinion create hero section
No description

[Javascript-Web development]Implementing mix it up and swiper js to my project

I'm trying to implement mix-it-up in my project but is not working perfectly well. When I initialize the mix it up in my javascript it works perfectly but the moment I tried to set the animation to false it stopped working. For the SwiperJS when initialized the javascript it didn't work while trying to figure out what might be the problem I deleted the earlier mix-it-up I wrote above and it worked but not as perfectly as I desired and the slidePerView I set for it isn't working. ...
No description

Weird gallery display on iPhone 14

I have a gallery of photos for an art school website. The gallery is a div with a flex-row-wrap display. Each image is contained in it's own div with a fixed height, a width of fit-content and a display of flex (centered). When I use emulators to look at this on different devices, the gallery looks normal, but I was sent a screenshot of some weird behavior on iPhone 14. It seems the div containing the image stretches to fill the screen, instead of fitting the content. CODE:...
No description

Trying to use getStaticProps in a layout.js

I am working on an application and I would like to use getStaticProps in a layout .js file of my routing. I keep getting an error that this is not supported but in the documentation they say that it only works in pages but I get the same error if I try to use it in page.js. The project is Next v 13. How can a fix this or are there any alernatives?
No description

Nextjs and Framer Motion

Is anyone else having issues using the Framer Motion library with their Nextjs project (pages router) ? I am trying to add scroll animations using framer motion's scroll-triggered animations e,g <motion.div...