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

css question

how can i make border boxes the same size? css
No description

small space left at the bottom for the img

If i set the height of the img to 100% the size becomes too big. any other approach?...
No description

Stripe payment gateway

Can i integrate stripe payment gateway to my html ,css and js website??

i can't make this paragraph responsive

the .intro2 is parent and .para is child , my paragraph is overflowing and it's look awful, i am a newbie and idk abut responsivess that much can someone help me to fix this.
No description

background individual property not working similar to background shorthand

background:
radial-gradient(farthest-side,#ffa516 94%,#0000) top/8px 8px no-repeat,
conic-gradient(#0000 30%,#ffa516);
background:
radial-gradient(farthest-side,#ffa516 94%,#0000) top/8px 8px no-repeat,
conic-gradient(#0000 30%,#ffa516);
...

Centering a div

Hello, I'm having a hard time centering this overflowing div. https://codepen.io/Suggon/pen/wvbrRqa?editors=1100 Is there a specific property that can help achieve this? (please note that the inset-based centering is important for my usecase)...
No description

Bottom Triangle effect

I want to make this similar effect in CSS. Is there a good resource on how to make an effect like this? I do see it using flexbox. https://georgian.edu/academics/undergraduate-programs/computer-information-systems/...
No description

This works on Desktop, but Mobile it's deform... please help

https://codepen.io/Auto-Ma/pen/KKLXGzQ The layout is fine until a certain small size screen where some require scroll to the right while other are narrow like a straw. It should have been simple enough, but I'm not great at this. ...

How to fix 100vh and grid-row 60px 1fr causing a scroll bar to show?

I have a grid setup on the body of my page and define two rows. Row A is fixed at 60px and row B is set to 1ft. I also ahve the body min-height set to 100VH. This combination causes a vertical scroll bar to apear. If I change 1fr to 0.99fr it goes way, like wise if I change 100vh to 99vh it goes away. This seems like the wrong way to fix this issue so what is the right way? Code pen example (note I do use normalize) https://codepen.io/Eaglef90/pen/qBGPMpJ...

top bar alert

Hi guys, I'm making an alert bar with the <marquee> tag but I don't want it to pass information, I want it to slide from one piece of information to the next, any tips? website im making : https://box46.criativatek.com/...
No description

box-sizing: border-box

What does box-sizing: border-box actually do? how is it different from the default box-sizing? And I noticed that when it is default box-sizing, any element with width: 100vw doesnt stretch full, that is it leaves some space at the left side, why is it so?
No description

How to store redux store to localstorage and get it when page refreshed

The issue where the page refresh causes an automatic logout typically occurs because the token is not being persisted across page reloads. in react redux How can i fix it?

Relative color from currentcolor

Hello everyone, On MDN's relative color page (https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_colors/Relative_colors) it's stated that origin-color should be any valid color, including currentcolor. But when I try to do something like this :...
No description

Background image is not full height with dialog element

Hello, without using background-attachment: fixed, I would like the image on this page (https://wisio.io/test) to always fill the height of the viewport, especially on mobile view. Perhaps this is not possible, but any suggestions would be appreciated. Thanks....

grid container with flexible rows?

i'm not sure if this is the right title but here we go. so i wanted to have a grid container with 3 columns. these columns have the same width. my items in it has the height of a max-content, when rendered i wanted the items to be right under each other without the grid's row height but i cant find my way around it. is there a way to set the rows in a dynamic way? or am i in the wrong path? maybe 3 columns and those columns should have flexboxes in it ? i am very lost atp. i dont have much experience with grids and english is not my first language so sorry if i dont make sense here's my codes: ```css grid-container{ width: max-content;...
No description

Promises question

I have the following code: ```js function geocode(location) { geocoder = new google.maps.Geocoder();...

Real-time Chat Messages Not Appearing in Angular & Spring Boot Application

Hello everyone, I'm working on a chat application using Angular on the frontend and Spring Boot on the backend. The chat messages are not appearing in real-time for the recipient, even though the WebSocket connection seems to be established correctly. Here’s a summary of the setup and the issue: Problem Description...

please help me wrap my head around flex-basis (particularly flex-basis:0)

Ok so i understand flex-basis sets an initial starting point width for a flex item. In the case of flex-basis:0 though (or really any flex basis smaller than the min-content width) , doesn't this effectively just give flex items an initial width equal to their min-content width? (since they can't literally shrink lower than this). With this said, let's say i have 3 flex items with different intrinsic min-content widths, and I set them all to flex-basis:0 and flex-grow:1. How does this result in...