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

Font size is scaled when scale is applied on hover

im using Tailwind CSS for styling. text is hidden by default and on hover opacity is set to 100 to reveal the text. The issue is scaling factor is also scaling the text. Anyone knows how to fix it/ https://codepen.io/avinash-tallapaneni/pen/abQmQYZ?editors=1010...

Project design

Hello friends please how can I create this design? The background image of the header is like 60% and the brown box is on it.

Two equal columns portfolio

How to achieve the behavior of fixed left column and a scrollable right column?

Automatic scroll for showcase

i am trying to make two arrows that automatically scroll in the showcase that is a specific width.

How to display background image from url

I am unable to display background image with css, my research on the web has been fruitless, seemingly I am using the same markup and stylesheet as in stack overflow posts but it is just not working for me. Can you help me identify the problem? https://codepen.io/FLAMESpl/pen/QWJKgNJ...

Content overlay on top of footer

Hey guys, this seemingly simple overlay effect has stumped me. I came across this cool overlay effect where the main content is on top of the footer on this website: https://www.eatsleepwork.com/ I copy and pasted the relevant bits I found in their code in codepen and it doesn't work. I'm really confused on what I'm missing here. https://codepen.io/vince1444/pen/oNQzZpa...

Codewar challenge

I have to keep the first word within the output capitalized only if the original word was capitalized, but my code is trasnforming every first word capitalized. What am doing wrong? expected output in the image ```js function toCamelCase(str){ let splittingWord = str.split(/-|_/); ...

Text overflow ellipsis once it invades parent padding

Hello, I have a container with wrapping flex items. The items are rectangles that have an icon and some text and have a set padding. However, in some of there is too much text once they reach their minimum width and I want the text to overflow with ellipsis when it happens. I tried setting text-overflow: ellipsis; overflow: hidden on the <p> tag with text and text disappears where I want it to however no ellipsis appear. ...

Div should shrink😫

Someone please help in shrinking this stubborn divπŸ™πŸ½ https://codepen.io/Creatorjihm/pen/GRwjqZy I want the end result to be like this...

Set width and height in a responsive way

I want this images to have the same width and height. How would you guys do that? Right now I'm using max-width 100% for the image and the width is ok. what about the height? the html code above `<div class="hero__photos"> <div>...

Just was looking for a quick critique on this landing page layout...

Just any thoughts, advice, etc. Not for anything real, just playing around. Thanks! πŸ™‚...

Etch-a-sketch

https://codepen.io/Laing91/pen/oNQLroe?editors=1111 Currently I'm trying to create a mouseover (or hover..)? that changes the color of each div. So far I have a bunch of divs (gridItem) with the class .grid-item assigned to them. It's been awhile since I've used the DOM in vanilla JS and I've gotten myself mightily confused....

Cloning IOS Moving Apps around feature.

Was looking for some resource that replicates the logic around editing the homescreen in order to move apps/widgets around Example: I drag an item1 over another item2. Item2 gets moved down and item1 takes its place....

Image not loading when hosting on Vercel with TailwindCSS

I've recently added my own photo to the TailwindCSS config file and when I use it as a background, it loads and works perfectly fine when calling it in a className. After I pushed the commit and hosted the site, the image and content for that specific section does not appear at all. The photo is what it looks like when I'm in the development server, but it doesn't appear at all afterwards. Site: https://dss-portfolio-v1.vercel.app/...

"Properly size images" Lighthouse

Hey, I was wondering if there were guidelines on exactly how big/small images should be? I know that images shouldn't be too big/small compared to their rendered width/height, but I've always just guess until Lighthouse doesn't complain anymore. Is there a tool or article I can read on finding the perfect image width/height?

Flex children not taking up 100% height of parent

For some reason, the div with the class "vertical-divider" inside the header__left div isn't taking 100% of its parent's height even when specified. Here's the code. I've tried using flex: 1 but no luck. Would be great if someone could help me out JSX: ```jsx...

text-wrap balance not valid property

Kevin just uploaded a video about text-wrap:balance but while I am trying to type it in vscode, it doesn't say it is a valid property. do I need to update vscode or somethin...

Marquee problem

Hello, I'm trying to create a CSS marquee animation but the animation is starting back from zero each time. Here is the code: ```html <div class="floating-banner"> <div>...