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 get the image a full size of the div.

Hello guys. How do i get the picture the full size of the 400*400. Its nor working out the way i want. Also when i give the parent element of the image wich is div class=img height: auto and width=100% its not working. If i make the picture bigger my first div is the way i want it anymore as you can see in the second picture. So thats also not working. What should i do? https://codepen.io/Boeroe/pen/PoVPPGX...
No description

TOGGLE BUTTON HELP

code: https://codepen.io/gsadopkgj/pen/OJdyyJa ISSUE: when you click on either "Reflections" or "Values" at the top the visual toggle is incorrect. if you keep clicking multiple times on either "Values" or 'Reflections" the content toggles back and forth but visually, "Values" or 'Reflections' is always "selected". I want the buttons content to only switch when you click on either (reflections or values); not to toggle when u click on one of them repeatedly... how do i fix this)...

Help with responsive and javascript

Hi i need help with two things my website sometimes is responsive but other times not and ive got no clue why its doing this? https://codepen.io/DevDaf-the-vuer/pen/wvRYoYK...
No description

image overriding a div's bc image

i wanted the div's background(linear-gradient) to be shown on the image, but for some reason it ignored that and only showed the elements of the div here's the codepen: https://codepen.io/staticoly/pen/KKJpjNp;...

Understanding complex animations

Hey guys I have a question that I really can’t wrap my head around, how do you create like interactive animations? For example let’s say I want to create a gas pedal and a speed odometer, and when the user clicks the pedal the odometer moves as if accelerating. The odometer is sinple but what my brain can’t understand is how would you animate a gas pedal being pressed down. Or another example a watch being turned 360 or a statue holding a ball and it rotating . ...

Advise lessons on Bootstrap5 please

I can't find actual lessons with Bootstrap 5 practice I will be grateful for your help...

Problem with reading information from array

Hello there, I have the following problem: This is my JS Code:...

Empty local font reference, i.e. local('')

Just trying to get some clarification on this as I can't get my head around the Mozilla docs. I've always assumed that with an empty local source i.e. src: local(''), url('...') the font uses the URL succeeding that in the property list. For example I thought:
src: local(''),
url('/fonts/source-sans-pro-v21-latin-300.eot
src: local(''),
url('/fonts/source-sans-pro-v21-latin-300.eot
Would skip the local and then load the font from the /fonts directory listed in the URL....

basic math with javascript

I'm new to JavaScript and i made this website that calculates the slope of a straight line, the formula is y2-y1/x2-x1, i was wondering how i can make it work with negative numbers without making it 4 inputs.
No description

how to make it so the typewriter effect only occurs on the index.html page and not other subpages

code: https://codepen.io/gsadopkgj/pen/oNmXegO I want this effect solely on the index.html subpage the effect is coded in the css tho so i need to add something to the css which specifies to only do it on the index.html subpage? reason being i have the same header on all the other html subpages...

Scrolling of 2 lists with one "somehow" fixed

Sorry I can't name this better. So I've got two lists. There's a very long one on the left and a short (initial smaller than screen height) on the right. And I want to achieve the behaviour that the right list moves with the global scrolling but stops when it's bottom basically reaches the page bottom AND if you scroll to the other direction it's top hits the page top (so the basic position: sticky; top: 0; in this case) while the left list always keeps scrolling ...
No description

grid and @container

I know if you put a width on a grid item it's then relative to how it fills its cell; If you use a container query to change a grid items behaviour, would the container be the main grid or the cell that houses the item?...

cut off text after a specific point

i have a border, and it has a margin of 20px. How do i keep the text from overflowing from the top
No description

JS label statement

https://codepen.io/Onii-Sann/pen/mdvJVEe I'm trying to use label then call the label using continue and break statement without using loop statement, then it doesn't work and throw the runtime error, does the label statement only can be used over loop statement?...

Reviewing small widget

Hi! I'm making this small widget that gives some info on recipes, and I was wondering if I'm following standard HTML/CSS procedures well or not. Any advice on how to make it more semantic/more industry standard would be great. Thanks so much! https://jsfiddle.net/k0a7L6j3/...
No description

special border

I am making a border around the edge of my screen. The 4 corners are perfectly spaced. Using flex space between. However, I want the borders to match inline with the corners with no overflow. It must be responsive. You can see my problem im having in the codepen https://codepen.io/GrayHay/pen/VwgLepw...

VS CODE ISSUES WITH FORMAT ON SAVE

I keep getting this error when I am trying to save files. How can I fix it?
No description

How can I single out this array element and style it?

I have put the code up in https://stackblitz.com/edit/stackblitz-starters-bp8otn?file=constant%2Findex.ts I have included only the two files relevant, components/footerNav/FooterNav.tsx and constant/index.ts The screenshot is of a nav bar at the footer of the main page of an application all enclosed in a div , I am trying to place the first element on the left on top of the row of elements, toward the center, and style it to be a bit bigger....
No description