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

How to maintain the proportions of an SVG across different screen sizes? (1920x1080 / 1440x900/ ...)

I want the SVG to always stay in the same position with the wave touching the exclamation point. Can someone help me, please? ```html <!DOCTYPE html> <html lang="pt-BR">...
No description

Infinite scroller switches direction mid way through

Hey I'm trying to make a animation for a case opening component, for some reason it seems to switch direction mid way through, another thing is my approach right now might seem wrong as I need to make it stop at where ever the winning item is (in the centre) and I'm not sure how I'd approach that either

forcefully make items wrap with flex-wrap

Hey, it's been a while since i've taken a look at anything frontend related, so i'd like to double check something. given that you have some items in a flex container with flex-wrap applied: 1. If you wanted to make a specific item wrap at a certain point/width, what would be the best practice for that again? i believe giving the item a min-width could cause problems as there's no value you could put that wouldn't potentially cause overflow? Unless that was the right method? ...

Rendering components in reactjs

I have 4 component in app.jsx <Component 1 /> <Component 2 /> <Component 3/>...

horizontal scroll

actually i am working on my portfolio website i want to scroll through different section of my page, i used this : html{ horizontal-scroll: smooth;...

Add marquee effect over image

What I'd like to achieve: https://bennadel-cdn.com/resources/uploads/2023/[email protected] Attempt so far: https://codepen.io/n00bCod3r/pen/gOjNvge Where the left and right border are the image's ones (with the whole title being shown and scrolling)...

Is it legible?

hello, everyone i am working in a simple age calculator (i havent finished) and i want some advices about the javascript part, am i structuring it correctly? can you understand it? or what resources do you recommend me to improve the quality of the code. All advices al helpfull

Unable to render the Post page in NextJS

The array of an object is listed as follows just to give you an idea.. { id : 1, image: "/image" title: dfdhfdjfh description: dfhdkfhd ...
No description

Issue with Thin Gray Border Appearing on Button Hover

Hello everyone, I’m experiencing an issue where a very thin gray border appears around a button when I hover over it. The button itself does not have any border set, so I’m unsure why this is happening. Can anyone help me figure out what might be causing this? Here you can see, what I mean: https://ibb.co/hCB12Vj...

Need help on this component design

```jsx <div className='flex h-[569px] gap-[6px] border border-green-500'> <div className='h-[] w-[264.88px] skew-x-[-21deg] bg-red-500'></div>...
No description

How do I make background transparent for only specific parts

For this design, I'm trying to make the semicircles transparent. How do I approach this design? anything related to blend mode?...
No description

can anyone help me make a login page with html?

i want it to look like this? could you send me a source to use or any tips?
No description

How do I remove browser/auto padding on h-tags?

I allready tried setting h1,h2 and h3 to padding: 0 and margin: 0, but without success.

NOT FETCHING YOUTUBE VIDEOS

the code it's not fetching youtube videos, actually it did like 3hours ago, didn't change nothing, but now randomly just doesn't fetch and i'm having this problem and this is the code ```Javascript...
No description

increment, decrement multiple elements of an elements in reactjs

So I have 10 divs rendered through map function but I want to increment/decrement the respective element value and display on a element Code : ```js let arr= ["item1","item2","item3"...,"item10"]...

How to Make Font Size,Margin,Line-Height and Letter-Spacing Responsive for <p> and <h1-h6> Elements?

I want to create responsive styles for the following properties: font-size, margin-bottom, line-height, and letter-spacing for both <p> and all heading elements <h1-h6>. Are there formulas or best practices for these properties so that they look good across both very small and very large screens? Looking for guidelines or CSS solutions to handle these style properties in a way that ensures readability and good spacing on different screen sizes....

Css, divs gets squeezed when used margin

https://codepen.io/SirYido/pen/WNqLjGK | when i use margin on the class of divs (.barBtns) they get squeezed up. why is that happening and how can i stop this, am i doing something wrong?
No description

Vertically align characters in different elements

i have 4 buttons each with 1 unicode character right next to eachother. The problem is that i want to make them all the same size and have the same alignment. So basically i want to have all the characters have the same height and position. is there anyway to archive this without having to manually fiddle around with font-sizes, positions, margins etc. ...
No description