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

Is styling disabled input box different for mobile?

So I styled the disabled for my input and it seems to be working fine on desktop. When I look at it on mobile it has default setting. Reference of the project I’m working on ...

Help with customizing file upload. File upload popup not showing after using display none on input

Im having issues where file upload popup is not showing when i used display none on input. i saw few tutorials and tried to replicate but didnt work out. can someone find where the issue is ...

TsParticles, Astro and Svelte

I'm trying to use tsparticles within a svelte component, but even with a client:load, it doesn't work? I must be missing something. I've tried ts-particles astro, but it doesn't seem to work. Are there any examples? Here's the current repository. https://github.com/Lofty-Brambles/alpha_esports/tree/main/src...

modifying Array and outputting the modified version

I want to output all the arrays with modified version, I want to put ? in the end of usernames and ! in the end of items ```const array = [ { username: "john", team: "red",...

Locomotive-scroll

Hi everyone Please somebody I had locomotive scroll on my website now chrome browser freeze when I m browsing on the site on firefox the locomotive script don't work . can I get some idea please ?...

how to install sass ?

i;ve installed it from cmd but when i created a file and im trying to create scss file on project this is what it shows

Flex box

I'm using two <select></select> inputs in my form. Normal on bigger screens I want them to be 50 50 with gap in between. And than wrap to if there is no space with the width of 100%.I'm using flex-box on them. I've tried using min-width:50%; on both <selection></selection>. Problem: -main one is due to using 50% i can not add gap. -after wrapping they still don't get width:100%; (picture is included) What do you think I'm doing wrong and could be a better solution....

CSS Selector

Is it possible to make changes to the span with class .input_info outside** .input_group** when we have .input_group:focus-within. Than what should the selector look like.

Help with JSON and typescript

I have a quiz with 3 sections, 5 levels, 4 branches json looks something like this ```json { "1":{...

Is there a limit for CSS variable count?

How many will be enough or start to cause some performance problems?

Span Icon overflow in form

The icon I added inside the input wrapper I made over the inputs using position absolute. The other icons seems to work fine. Problem: But the icon over textarea seems to be overflowing. What could be the reason. I've never tried adding icons over form so I dont know their behaviour. Codepen Link that shows the problem. https://codepen.io/Arslan-Akbar/pen/eYPJqpZ...

Media Query Colliding design

guys need help, I having some issue on my tab landscape orientation and laptop view design they're colliding, can someone pls help me, I don't know if the pixel ratio is the problem, the design from galaxy tab s6 lite when it is landscape orientation is applying the design from laptop and the laptop view is applying the design in tablet. @media only screen and (min-width: 1280px) and (max-width: 1368px), only screen and (min-width: 1280px) and (max-width: 1368px)...

issues with mouse cursor on dragstart event.

So im trying to get rid of the default style (o with line at 45deg) when dragging .. so i used e.preventdefault(). now im having the issue where styling is not being applied for the div thats being dragged ie red background colour . how to fix this?

Class toggle when div ID == var

Hey front-enders! I’ve been building a carousel with some snippets of JS and CSS, where 'var curSlide' returns the index of the current slide. My next goal is to reveal different text elements inside of a div that is adjacent to the slider (so that they don’t follow the movement of the carousel. Now I want to show/hide the text element, have assigned them with IDs that are identical to each slide index, and want to run an if-statement to send the correct css class to corresponding IDs....

How can I make my video background stay paused on all pages?

(Codepen for context: https://codepen.io/BravoLima2k4/pen/zYmrzox) I have a custom video background for my site, which you can pause if you don't like the moving background. There is also background music which is paused via the same method. However, I want it so that if you pause the background video on one page, it stays paused on all other pages, and vice-versa for when you unpause, it unpauses on all pages. Also as you many notice when you scroll, after a certain distance a blurred background will slide down behind the primary nav, but when you scroll back up it just disappears, and I can't figure out how to make it reverse the transition....

How to recreate this background effect?

I'm stuck trying to recreate this, but I've not progressed with anything. It responds to mousemove and the lines move away from the mouse....

Is this a bad approach?

``` *, :after, :before { background-color: inherit; border-color: inherit; color: inherit;...

[TS] Differentiate class instance from pojo

I'm looking for some type Differentiator which will satisfy the following type checks; ```ts // types type Differentiator = ......

Can someone explain me this?

<html> <head> <title>QUESTION</title> </head> <body>...

simple CSS animation of sliding into view and out of view, and how to approach it

so i want to make a simple animation of a box with content in it (similair to a spam popup "singles in your area" type of feel) moving in from bottom of the screen (what the user sees without scrolling), take up about about 1/6 of the screen and then after a click somewhere (button?) , animate out again. i think i can solve the javascript on my own. but im unsure on how to CSS animate it and how to make the box responsive on mobile or desktop.
im guessing there are different ways to approach it, so id appriciate if you could name some of em just to get me started, or give me your general approach on how to solve it....