KPC

Kevin Powell - Community

A friendly place for developers to meet other devs, ask questions, get help, and just have a good time 🙂.

Join

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

kira

5/7/2023

CSS

If I have a div parent and three child elements. The div parent has property of display: flex; align-items: center; justify-content: space-between; and i have a free space in div parent so i want to last element child to go to the last but i try the align-self or justify-self but it's not working

Å Marlon G

5/7/2023

Javascript nested loops for beginners

Hello folks! Why does this code print 1 2, and not the names that are similar in the arrays? Comes from codecademy's JS beginner course ...

Paran

5/7/2023

How to add some light to a specific part of a container

Hey all, above the heading here there is some sort of light that is different from the rest of the background, what's a good starting point to achieve this? I've tried with radial gradients to no avail, also I tried a before pseudo-element and it looked clunky. Any help is appreciated

ChrisBarin

5/7/2023

Empty space on mobile

Hello, I have this ugly empty space at the top and I can't seem to find how to fix it. The site is expertphotoshop.ro. I tried inspecting it, but I have limited knowledge so I'd appreciate some help with it. Thank you!

vince

5/6/2023

Quick question about section tag regarding accessibility and semantics

I was wondering, with the section tag, in the MDN docs it says that there should always be a heading/header associated with each section wherever possible, with limited exceptions. I was wondering if adding aria-label to a section was sufficient? Or should I use a heading and add a .sr-only class to it? I'd imagine a screen reader reads it more or less the same, but I'm not sure if it would impact search engine ranking if I'm not semantic.

SurprisedPika

5/6/2023

Making volume control understandable to screen readers

Hey guys. I'm making a music website, and I've created a button that handles volume control. When you click on this button, it toggles whether the music is muted or not. When you scroll on this button, or use the arrow keys, it increases or decreases the volume between 0 and 100....

thethingisback

5/6/2023

Forms: "for" attribute when wrapping inputs in labels

I'm going to be creating a form which has multiple instances of the same inputs, due to many of those inputs being relegated to a separate 'modal' html at mobile. Because of this, I won't be applying IDs to the inputs, but instead using class. I've been told, for ARIA reasons, it would still be best to wrap my inputs in labels.. However, because my inputs won't have IDs, I'm confused what the use of these labels will be, since the label "for" attribute only points to IDs, which I won't have. ...

shiba.

5/6/2023

Is it possible to add margin to the scroll that happens when you type.

In HTML when you type something, browser scrolls you to the place you are typing to if its not in the screen. How do I add margin to that scroll? It scrolls to the place you are typing at, not to do element you are typing to. So for example if you have a textarea bigger than the screen height it will still scroll to the place that you are typing the text to....

hotsauce4dayz

5/6/2023

How do I disable an input until a date is selected.

I am new to JS and I am working on a project. A booking project. I want to disable an input until a date is selected. Here is the JS: ```const button = document.querySelector('.btn'); const date = document.querySelector('.date');...

aevitas

5/6/2023

Kind of lost on how to optimize this piece of code

Sandbox: https://codesandbox.io/s/friendly-bell-eclcq6 I'm creating a website for a game which contains certain tools. In this case it's rendering items specific to a certain class. There's generic items (ArrayTwo.jsx) and class specific ones (ArrayOne.jsx). The class is selected outside of this component, this is handled by context which is why I just hardcoded it in the example:...

Herelore

5/6/2023

why does this display ID input have padding at top and bottom?

this is the codepen to the project: https://codepen.io/lirem/pen/PoyEVxY ive tried setting padding on #display to 0 and ive tried setting the input element padding to 0. the top and bottom padding is only reduced when i increase the font-size. so im guessing that the space is for the content to expand but how can i control it? what funcamental principle of css am I missing over here that is preventing me from debugging this?...

thethingisback

5/6/2023

Unable to console a pushed history event.state object, always returns 'null'

I'm trying to set up back and forward button navigating on my search results page, to enable going 'back a search' without leaving the page completely. I'm currently just trying pass an arbitrary object : history.pushState({word:"this"}, null, "SearchResults" ). ...

samidev

5/5/2023

why im getting these errors ?

im learning react js but im getting these errors idk why ? can somebody help me ?? CODEE LINK DOWN BELOW https://codesandbox.io/s/suspicious-ritchie-6y2cx5?file=/src/components/ClassBasedComponent.jsx...

b_sups

5/5/2023

Issue with value not being passed down correctly.

Am still working on learning pagination. I am trying to use less repeated code, so turned my button click into its own function. When I click a number I can get it to go to the correct page, but when I use the previous button, it changed the current page to 0 no matter what the page is. The initial value is set at 1. I understand this means the function call is using the initial value. https://codepen.io/bsups/pen/xxypaWE...

arogersrenee

5/5/2023

Adding padding to SVGs

I'm using SVG icons with a border-radius to create a circle around them. When I add padding to give space the icons disappear. The only way I could fix was to make the icons smaller padding smaller. They look fine, but I would like better control over the size. here's al link to the repository if that's helpful: https://github.com/arogersrenee/huddle-landing-page-with-single-introductory-section-master TIA...

Sste

5/5/2023

Container with different size from others

I want all container with the same size here. However, the last one container (with the t-shirts icon) has a different size compared to the others. I believe it's because of the word length... How can I solve it? https://codepen.io/ssstephanyyy/pen/rNqYYqE...

Abdul Ahad⚡

5/5/2023

Center a text element staying responsive

https://codepen.io/ahad4387/pen/MWPrEJb I'm trying to keep the dark EXPLORE always in the centre while staying responsive. tried using absolute with % on left but it isn't really responsive. ...

interpod

5/4/2023

How do you approach height responsive website?

So i developed webapp in react + chakra-ui. I was developing it on monitor with 2160 height dimensions (either 4k or UHD). When i opened application on full HD monitor (1920 x 1080) everything looks so big. Header, Left and Right sidebar. Most of the time I was fusing on width responsiveness and this issue got me thinking. One idea I have i my mind is to use "em" unit everywhere (even on fontSize) and scale it on the parent using media query. What is you approach to something like this?...

kashyap_rajan

5/4/2023

How to create a gradient so that it is beneath the text but above the main background of container

I need to create a background as shown in screenshot. Now if I create a div with fixed height or width, or even I use pseudo like after and before how am I supposed to put the gradient thing behind the text but above the container main background? I've never done this kind of work before. z-index is putting the entire thing behind the container.

d0kefish

5/4/2023

Trying to understand @media

Why does this happen? https://i.imgur.com/Pme2KoH.gif When scaling the screen it seems to be working, but when I change the screen size, its very different. ...

Previous Next

Gaming

Programming

Kevin Powell - Community

A friendly place for developers to meet other devs, ask questions, get help, and just have a good time 🙂.

Kevin Powell - Community

A friendly place for developers to meet other devs, ask questions, get help, and just have a good time 🙂.