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

No width on my grid

This works on a desktop/laptop but on mobile IOS / chrome it has no width, why? https://jsfiddle.net/qd4gboj8/1/

Help on Grid Layout

While trying to solve Code challenge by Kevin, I tried on using the Grid layout. Link to Codepen is here: https://codepen.io/anurag1989/pen/xxMqMXR Size of img_1, img_2 and img_3 = 471x628 Now the main issue I am facing here is that even though I have declared row inside .container to be 1fr each (with display: grid ), still I am not getting equal height of box-1 and box-3. I thought by this I will get equal height of rows but height of box-3 is approximately twice from that of box-1 (or box-2). If I declare grid-template-rows: 50% 50% then it approx. solves the issue but still the heights are not equal. ...

How to make <div> fit image width

Hey there, I need help with this weird problem I have(see screenshots). I am trying to justify-content with these flexbox images, but I can't because of these weird spaces between each images that end up taking all the spaces horizontally, which prevent me from justify-content. As you can see on the screenshot, I want to get rid of the red section, and make the div fit the image instead of overflowing until it touch the next images on the right. I joined my CSS code snippet, maybe it will help. (I am quite new to web development and its my first time posting for help, so if the way I am asking my question or how I present my code snippet is not how it should be done, please guide me so next time I can ask using the good practice, thank you)...
No description

Hero section inside <header> or <main>

I have seen a .hero/.intro section (usually the big intro image on a site) both in a <header> tag and in a <main> tag. What would be the correct place to put it in? Assuming standard structure: ```html...

crud app help

Hey everyone So I'm building this simple crud application to prepare for my big todo app project, I'll be doing later. So I have the create, read, delete functionality down, but when it comes to the update(edit function) part I'm struggling, could any of you guys please help me, and give me some pointers thanks in advance. Here's my github repo: https://github.com/Stanbkrylix/Simple-Crud-App-practice.git...

outline border-radius

Hey folks! I just watched Kevin's video about outlines and borders (https://www.youtube.com/watch?v=xx_pJ2ouGnc&t=246s) and was surprised about the section about how outlines don't respect the border-radius of the element. I seem to remember that was a limitation and the video is from 2 years ago, so perhaps (at least chrome) has added support for outlines in the meantime to respect the given border-radius because it works now.
I wasn't sure how to look up the browser support for this though. Caniuse.com doesn't have anything specific to this. The MDN outline page (https://developer.mozilla.org/en-US/docs/Web/CSS/outline) mentions that border-radius should work, but doesn't mention anything about browser support. Does anyone have any insight about using outline in conjunction with border-radius and the browser support for it?...

Free-trial days left indicator

Hey, any suggestions how to achieve this? Trial period is 14-days-long, there are 5 circles to indicate at what stage of this trial period the user is. How to change their colors without changing the color of anything else? Thanks in advance.
No description

pointer event

What is the use of setPointerCapture and releasePointerCapture and also how to use it

Keep element in viewport up until a certain point

I'm currently facing a challenge i'm not so sure about how to approach and curious with what kind of solution some of you smart people over here come up with. Basically I have a page with multiple sections and one of those sections has an image with some text next to it. When I scroll down further, I want the image to follow the viewport, until the text from the next section arrives next to the image. Then, when I scroll down even further, the image should leave the viewport together with the te...
No description

Section html css

Hi guys, I would like to know how I can make this type of division between sections in HTML and CSS
No description

Toggle menu

Hi guys how can i get the menu icon all to the right https://codepen.io/Boeroe/pen/xxMgrxz...

Code review - Stats preview card component

Guys, I would like you to give your opinion on the best way I should have used to build this component. I struggled for two days to make something that worked, even if it was full of 'hacks'. Github repository: https://github.com/sircarloschaves/stats-preview-card-component Live site: https://sircarloschaves.github.io/stats-preview-card-component/...
No description

Slide-in animation snapping when opening the navigation drawer in mobile view

I am trying to clone the sidebar navigation from this website https://m3.material.io/ , How it is supposed to : In the mobile view , when clicking on a menu item the menu slides off and the navigation drawer is revealed ...

i18n while keeping path /en /fr

So I want to use i18n for a portfolio website I have because I currently just have all my files duplicated for every language. Is there any way that I can keep my /en and /fr without having duplicated files and using i18n ? I'm using html/css/js/jquery here is my current website https://antonycd.com/en

Triggering an animation based on scroll position

Hi there, I'm working on a website, and I've been wanting to recreate the following image. Not the design but the animation. It slightly moves left or right depending on whether you scroll up or down as you can see in both images. I do know how to trigger things when they appear in your viewport but that's only once, this seems to be something entirely different. ...
No description

What are the best practices for the number of srcset items for a dynamically sized image?

I have the ability using server side rendering to render as many different source images as necessary, given that the library (in this case, sharp) can render any size requested. When is the overhead of having too many possible permutations of sizes a performance hinderance? It seems like no matter what if you are selecting only a handful of sizes, your images are not being optimally sized for every possible screen size. I've Google searched for any kind of best practice information on this topic and have come up dry in finding any official recommendation from Google, Apple, Mozilla, or other browser makers, or any of the HTML W3C Draft docs and discussions....
No description

Styling inputs, and lining up multiple list items

Hi all, Last bit of my first svelte app and I'm a happy chap! I'm hoping the sandbox works and lets you edit, perhaps...?...

Trying to add a checkbox that also line-throughs my list item when completed:true

Not sure how much code you need, I've console.log("test"); which worked, and console.log({todos}); also worked, however even when clicking the checkbox, it would show as completed:false every time... I'm not really sure where the bug is. I've also noticed this .completed css selector isn't working, but it's clearly shown below in the todoCard div, so I'm also not entirely sure why vsc is saying it's an unused css selector. ```js...

Grid as a child of a flex doesn't work properly

Code: https://play.tailwindcss.com/XSMPnICSXN As you can see the green squares are overlapping each other and the red container is overlapping them as well. What I want to achieve is something like that. I tried using width: 100% as well but it still doesnt work...
No description

can clamp() be used for anything other than font-size

well I know what clamp() function is or what it does I've only seen people using it for font-size but i wanna know if it is possible to use it anything else for example, margin, padding or gaps I also know about min() max() functions that we can use but i once used clamp() for gaps and it worked quite amazing...