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

Thoughts on how to make this bottom part?

nutrition part is confusing me how do i make it?
No description

React and Redux E-commerce

Hello everyone i have an issue with my ecommerce shop when i add items to the cart from my normal page they are adde, but when i try to increase or decrease their quantity i cant i should press addToCart, down below i will share mycode and liveDemo! https://github.com/Anes039/Test Demo: https://38pnml-5173.csb.app/...

Extra button space out of nowhere - where is this padding from?

Hi, I'm a beginner and I'm working on https://expertphotoshop.ro/ mobile version. The two buttons seem to have some extra space on either side, especially on the left side. I'm comparing them to the text above and there are about 3-4 pixels on the left side and about 1-2 on the right. I can't seem to find this padding anywhere in the code via inspect. Can you point out where is the padding coming from? Thank you!...
No description

can someone help me?

hi, i wanted to ask help for the jquery with stimulus with this small project of mine because I've done it good at large screen however in small screen like tablet it did not went pretty well when i tried to next it and prev it. i wanted to have a 2 cards shown on tablet and when i hit the next button the 2nd card should fully show and the 3rd card should be visible by half and then agin when next button is clicked the 3rd card fully view and 4th again by half and soon. here is the code https://...
No description

Which JS show menu approach is more efficient / cleaner to you?

Watching a responsive design full site build because I am TERRIBLE at mobile first and this guys attempt looks sorta verbose to me but I'm not really the person to be talking semantics so I wanted you all to gauge these -- first one will be my approach and the second will be what the guy in the video does: ```js const burger = document.querySelector(".hamburger"); const nav = document.querySelector(".nav");...

FOUT

Apart from using system fonts, is there any way in 2024 to avoid FOUT while keeping Lighthouse happy? Inline SVG fonts subsetted for the critical content, maybe (so that the font initially used e.g. for the header's title only contains the dozen or so characters of the title) ?...

React --> One horizontal scroll bar to handle a multi-div timeline

I'm trying to make a timeline that has multiple rows: [Group A Div [Div A Title here]: [Div A with multiple elements inside] [Div B Title]: [Div B with multiple element inside]...

Is it possible to add links to a table?

i am trying so when i click a row it will link to a spesific page? ``` <table> <thead> <tr> ...

Height of div auto adjust text

How to enlarge the height of the div when you shrink the size of the page so as not to have overflowing text ?

Has anyone been able to solve Stacking Context issues between container queries and z-index?

The screen shot shows the issue Container Queries has with z-index. If I turn off container queries, the select dropdown is above. I suppose I could use the native select, but..... 😦 I've been able to use RGBA to handle opacity stacking context issue, but I can't find a work around with z-index....
No description

Help with accurately matching CSS from designs

I am having issues where my code does not always match the design visually. I feel I am missing a topic or something to help bridge the gap. Can anyone help. This is an example.
No description

Scrolling past loading screen

I've implemented a loading screen while all the gifs in my website is loading but I've found that even while it is loading I am able to scroll past it since it is just covering one section. Is there anything I can do to disable scrolling while it is loading?
window.addEventListener('wheel', handleScroll);
window.addEventListener('wheel', handleScroll);
...

Please do we have any javascript course just like this conquering Responsive layouts?

Am going through the so called tutorial hell while learning javascript.. I need a place I can explicitly learn javascript

Help with Iframe carousel overflow

unable to hide Iframe overflow and maintain the iframes given dimensions

How to Make Full-Width Items in a Container with Padding in CSS?

I'm trying to create a layout where blue and green rectangles (background-color) take the full width of the screen while the text should keeping a padding inside the container. Here is my HTML and CSS code: https://jsfiddle.net/6hyo07mb/1/ The problem is that the rectangles elements are not taking the full width of the container because of the padding. How can I make these items take the full width of the screen while keeping the container's padding?...

Help me with making responsive web design 😅

Problem: I am currently having trouble with making a responsive web design. Context: I just started learning HTML and CSS, and I am currently learning JavaScript. Here is the video and the screenshots....

Masonry / Mosaic layout

This is a mosaic / masonry layout I created in Figma for my portfolio site. I want to add images to each of those divs and wrap them in a href which either takes the user to a new page or show a lightbox that will show an enlarged version of the image. The problem is the images not fitting the dimensions of the divs thus not forming the layout. How do I know what dimensions each div is so I can create the images accordingly? The code for the css grid div is:- display: grid; grid-template-columns: repeat(3, 1fr); grid-template-rows: repeat(7, 1fr);...
No description

Tailwind Typography's weird values

Tailwind uses some em values with lots of digits, e.g. 0.5714286em. Where do those come from? Is that some golden ratio-based thing? I think 0.6em probably looks the same for any reasonable font-size at any resolution.

Flex 1

Can someone explain how does an element with flex 1 and another element with 320px begin to wrap next line? ```js <Container maxW={"960px"} py={[4, 4, 16]}> <Flex justifyContent="center" gap={"12px"} wrap="wrap"> {/* Left Side starts below */}...