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

Absolute position problem when scrolling

I'm having a problem with an abolute positioned element when scrolling, it moves and overflows the container: https://codepen.io/n00bCod3r/pen/XWQaZbz I tried adding a position relative to the container, but it gets cut:...

Kevin’s courses offline available?

Hi, not sure if this is the best place to ask but for those that did his courses. I’ll be traveling soon having 13hr flight and long train rides in Japan and I was wondering if any of the Kevin courses were doable offline or is it all online? Otherwise I’ll just download a few front end mentor challenges, thanks.

Restrict element to dimensions of page

Is there some method to simply tell an element to not overflow the dimensions of the page and instead to just resize itself to stay within the pages dimensions? So, I have an element with a necessary position: absolute and its parent with a necessary position:relative;. I cant seem to position it relative to the page, because it will obviously always only position itself relative to its parent. https://svelte.dev/repl/cad337d2bc4e4f0cb51b1b24aafc09f1?version=4.2.12...
No description

can somebody tell me the correct path for this image?

I tried: <img src="../hero-img.jpg" alt="Hero image"> <img src="./images/hero-img.jpg" alt="Hero image"> <img src="../images/hero-img.jpg" alt="Hero image"> <img src="/images/hero-img.jpg" alt="Hero image">...
No description

Space Issue

This is the child of a flex and dont why there is this space in red here and flex direction is column, what could be the reason? I uploaded it to codepen and code isfine there. Why this is happening in both browsers i.e Chrome and Firefox....
No description

How to style "increment" and "decrement" arrow buttons in a scrollbar?

Hi everyone, I made a container for the future cards and wanted to style a scrollbar buttons (increment and decrement). I tried "::-webkit-scrollbar-button:vertical:increment" but it didn't work. Do you know how to style them? I wanted beautiful blue arrows. Thank you!
No description

Grid or Flex?

I was never good with grids, to be honest I barely know of css grids. But I feel like I can do this much better by using css grids, suggestions?...
No description

How do I apply padding to all but one div so it is full width while other divs have breathing room.

I want to give breathing room to all elements on my page by just putting padding on the container. But there is a single item that acts as a breakout content. I want to negate the padding on that single item only. Negative padding is not a thing aparently, what's my next best option? ```jsx <main style={{ paddingInline: '20rem' }}> <div></div>...

Is CSS nesting ready for production?

caniuse.com says it is supported across all major browsers, is that enough to start using it in production? https://caniuse.com/css-nesting...

Need Help with a Responsive grid display

I'm working on a press page for a game me and my friends are creating and I cannot figure out how to make this section do what I need it to do for the design to work. I've been sitting here for 3 hours trying different approaches to Display: grid using repeat, auto-fit, auto-fill, minmax and everything. Please someone shine a light on this for me. The images basically need to be by the side of their paragraph when the display has width and when smaller they need to go above (in the case of the first 2 images) or below (in the case of the last image). I feel like I am over-complicating this, but I wanted the image to only cover about 30% of the line space and the text be the rest of the 70% of the space (on desktop). I've tried so many things and nothing is doing this correctly. In I have not been able to make it responsive, I've gotten close to it but it does not respond correctly. pls help, I've only been coding for 3 months am new to this. ...
No description

nothing is rendering in nextjs page when mapping through an array

I have an object metaDatas with two properties: slugs and titles. both of them are arrays. slugs are for links and titles are for the titles of the document I want to show to the end user. ```js const getAllPostsMetadata = async () => { //get the names of the documents to generate slugs const folder = "content/docs/";...

:last-child:first-letter:hover

The two photos I have attached are my issue I am trying to target the first letter of the last child when hovering to change the first letter to a different colour so you can see it. ``` * { margin: 0; padding: 0;...
No description

the smouth telebort

give me the smouth telebort in 3s from <a href="#shop">Scroll down to Smouth</a> to <a name="shop"></a>
No description

How do I have text go to the start when exceeding the width of `textarea`?

Yeah, basically what the question and image entails. Is there a way to have writing go all the way back there when someone types more than the width of the textarea?
No description

Website on Smaller Screens

Hello. I used media queries to adjust the view of my website when it's being viewed on smaller screens or resolutions. It works when I shrink my browser window but when I inspect and preview it mobile, it still looks really bad. Why are my media queries not working?
No description

Issue with image span

I'm trying to span the image to the 3 column, but it's not working. I did some research couldn't find any answers. Code pen: https://codepen.io/Jonah-the-lessful/pen/qBwjXVo...
No description

hey can someone help me setting up google auth with pocketbase and reactidk where to even start

hey can someone help me setting up google auth with pocketbase and react idk where to even start i am a beginner in general and pocketbase...

HTML contact me

Where should I put the Contact Me? In the footer tag or it is still in the body -> main tag?

Still blur on carousell

How to make previous icon and next icon next to the carousell to scroll my carousell instead of carousell controls i have no idea how to do i did many research on it i didn't got using bootstrap icon
No description

Need help with an unsymmetrical design

I have this design that I have to make. It looks too animated to create things in pure css. I would like to know the best practice for this. - Should I use absolute positions for background and logo and the book icons? - Should I use svg icons inside button tags for buttons? - And use svg images for background in various places such as the bottom text with the yellow paper background and the cloud texts?...
No description