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

Nextjs Layout

Hello, I want to ask about a way to remove the root layout from displaying in a certain component file, I tried many things but tge root layout keeps displaying, how can I achieve this?

After I've added <!DOCTYPE html>, everything became buggy

Title. Please, can someone help me on voicechat or codepen? I'd like to learn how to fix this problem and to fix my website. I'm working on this uni project and I'm making a website. I forgot to put the <!DOCTYPE html>, but after i've added it, everuthing became buggy, like, the background image it's too big or too little and repeats itself, the buttons are bugged, when I click one, everything on the screen moves down, I've tried to work on the dimensions of the css elements, but nothing changes

How to fix this last question image?

Anyways to fix it? HTML: <div class="question4"> <span>How can I get help if I'm stuck on a Frontend Mentor challenge?</span> <img src="icon-plus.svg">...
No description

How to straighten these rows?

I have cards with rows of data that may have variable length text. Right now, each div within a row, within a card, is independent from the other divs on the same row but in a different card. How do I make these grow to the tallest div in each row? https://codepen.io/Jason-Cabreros-the-sasster/pen/NWJwxWR...

Nav Drop Down is appearing at the bottom of my page

Beginner here Im trying to create a responsive nav bar but I have been having alot of issue with the media screen part, when my nav list pops up it appears at the bottom of my screen.

How do i add such caret in my website ?

https://monkeytype.com/ It is using event listener and moving caret on each letter type but the problem is how do i find specific width for each letter cuz all letters don' t have same width, I thought of alternative approach which is adding ::after pseudo property but doing this i will not get the caret move effect like in above website....
No description

Responsiveness tips!

Hey i’m 15 days into CSS, i do struggle with responsiveness alot as i always start with desktop design and try to fit it into mobile, also i don’t use media queries, i just stick with basic responsiveness code. So any tips to maybe avoid some errors or some best practices would be appreciated!...

How to handle responsiveness of an image ?

Hello, I'm trying to handle the display of an image on the hero section of a website. It's a simple two column layout, with text and CTA on left, and an image on the right (for laptop and desktop) and a one column layout for mobile and tablet with title - CTA - image. I would like my image to grow proportionnaly to the resolution, but I don't know how to do it ? For mobile I have this for the moment (cf image). I have a max-height on the image. So the problem is for tablet my image isn't the biggest it could be ...
No description

Text and Images

What is the best way to put text on the side of an image, I'm not sure which the best to use. Do I use float? or grid? or flexbox? especially when it comes to responsive layouts. Would appreciate your guys take.

Animation text

Can anyone tell me how to make this animation? Thank you so much

REACT JS Error

Guys why Do I get the Error Under My Function Parameter even if the result shows Up correctly
No description

Image scr

why can't i navigate to my images as they wont display. /images/rabbit.jpg Is what i used or even two ../

Looking for ways to visual CSS Grid

Hi all. Looking for a little help. I know only a little about CSS but I have dabbled with it, html, php, etc over the years. I'm a Home Assistant user and I am looking to replicate some of my Alexa Show screens as Home Assistant 'cards'. These cards allow for CSS elements including grids. I think I understand the concepts but I am having trouble getting things right. I'm looking for a resource that allows me to fiddle with settings and see the results live. I found this site: https://www.cssgridplayground.com/...
No description

how can i make a single grid item from many grid items have multiple rows or automatic height.

<div className="grid grid-cols-11 gap-1.5"> <p className=" col-span-3">বরাবর</p> <div className=" col-span-8 flex justify-end"> <p>তারিখঃ ০৭ November,2022</p> </div>...

CSS: Hide team card's inner text elements by default; show it while hovering on the outer element

Anybody CSS Pro here? 🙂 I need your help guys! /* Hide card without Hovering */ This is a member card - I want to make it hidden by default to just show the photo of the person...

input border active issue

hi guys how I remove this, I try to manually input this in css like input:active - > border: none but suddenly this border still showing on my website. Hope u can help me, thank you!
No description

React - Updating useState as a Multidimensional array.

Hi, I am looking at the performance consequences of managing a state via a Multidimensional array. Currently, I am representing a 15x15 grid as a multidimensional array, each cell (gridName[row][col]) contains five "key:value" pair pieces of data about that particular cell. When a user clicks a cell, it calls the useState function to update the contents of the key:value pair for that cell, and depending on the update, it may also update another cell; this updates are then used to change the visual data within the cell. This is done by returning a new version of the array. This is my first react project, so I am wondering what the performance impact of this may be, as I can't seem to find a better way to do it, and in the dev console, each update is around 4ms. Also note, that the grid size will always be 15x15, so larger grids aren't an issue....

Tailwind Stressful

I don't know, maybe it just me but I find tailwind a bit stressful. I wanted to do a dropdown but couldn't. Later I found out that I need a plugin to make it work. Tried different plugins and tutorials but didn't work as I wanted. Had to drop the idea and switched to bootstrap which I am more comfortable with. Do you have a tutorial on tailwind? I find your tutorials more refreshing and your explanation is second to none!