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

Need ideas for a nested ul layout

I need ideas, suggestions or examples for a nice way to display a nested ul (or perhaps, a better way of displaying it). I tried a grid, with a flex inside, but I'm dry of ideas. Here you can play with the HTML: https://codepen.io/myntsu/pen/OJwQaoz...

How to add web workers in react components for 3rd party scripts like google tag manager etc..

I have been trying to implement web workers in our static page when I implemented the web workers the main thread got increased to 16SEC and for mobile main thread taking 8SEC and adding few more script's to worker file it's increasing more work thread process I'm no able to figure it out can anyone help me in this ? for both mobile and desktop version it's been different. Thank you in Advance....

Hovereffect with opacity on gallery

Hi, I'd like to make a hovereffect on a gallery where if you hover on the whole gallery, the opacity lowers except for the image you are hovering on within that gallery. Actually something like this: https://secretlab.eu/nl/products/magnus-metal-desk?sku=MagBdl15S-C9 (scroll a little down, about 60% on the page is that gallery) Here is my codepen: https://codepen.io/axl-prudhomme/pen/BaPYJjq?editors=1100 I hope I explained it well....

CSS centering in div..for multiple screen sizes

I have a CSS element project ..centered in a div...centered in large screen. But when I go to mobile screen, it is offset to the right. Is there a special key to get this to work. Thanks.
css ...
css ...
html.

Image file src problem

So i have some images which are within folders when i hit Go live on VS code they works properly but when i open index file directly o browser the source broke

im trying to make image bigger but it just doesn;t get bigger

this is just an extensions from vscode and it is on iphone x so please can somebody help me...

Form submit button not having click event in browser, yet form is getting submitted?

Both on right click and left click? And only when submit button is clicked, nowhere around the form. Any explanation for it? Can you just submit form without Click event?...

i can;t fix the image

i wanna put image on the center(on mobile view)i need help can somebody help me please

Select Style a "Placeholder" Option

I'm looking for some help trying to style my 'default' option as a placeholder, to match other placeholder for input (a lighter grey). I'm also doing something with with the label trying to keep it displayed after the select loses focus. I have created a codepen that demo's what I have so far. Thanks for any help. Codepen is https://codepen.io/hoskinsconsulting/pen/PoBQbRZ

Can't import SVG via ReactComponent

I need to import logo.svg, but I'll have to change its colors later on so I can't just import it and use it as src in <img> tag. So I've googled if it's possible to import it as a component and I've got people telling me to do it this way: ```js import React from 'react'; import { ReactComponent as Logo } from './assets/logo.svg'; ...

learning menus

i have been trying to learn how to build menus but so far everyone is doing it differently, anyone knows where i can find professional website menus either tutorial (preferably) or code and i try to understand it.

I need help on making projects section responsive

how can i make this on responsive way, i've been trying so hard but still i can't help it

map() output/return used as next input (class method)

I hope the answer to my question is not recursion. I need to use the result of the 1st iteration of a map method as the input for the next iteration, up to the last item in the array. I'm using map() inside a method that is part of my class. I have to create a new instance of the class that uses 1st an initial array of strings, and then again for the output/return value of that first instance. That output is the input for the 2nd instance of my class and its output is used in the 3rd, and so on. But I know that is not a good approach even though it works. So how can I get the return value for the first item in a map method to be the input for the next item?...

need some fixes in the border animation

hey folks this is the CSS of my div ```css .celebrityNights { display: flex; flex-direction: column;...

For some reason my tailwind css classes do not apply without running the 'npm run build-css' command

Hi, for some reason my tailwindcss classes do not automatically apply after saving on a live server without running the command 'npm run build-css'. Could anyone please help me? I would greatly appreciate it...

Quasar qSelect weird behavior

Hi there, I don't know if someone uses quasar here but the qSelect component really has a strange behavior when I try to fetch the options asynchronously... In short, the menu doesn't show after the first time I write anything in the input, even though the query worked. To make the menu appear, you have to press "enter" or the down arrow key, otherwise it won't open. Can anyone help? ...

image hero fade

I have looked everywhere but I have an image, and I want it to cover the entire page, but I also want the image to fade to black, but stay in place as the user scrolls down, revealing text on top of the image. I've tried so many ways, but I can't figure out how to make the image not scroll, or the text to stay out of the way, and so many other things. I have about given up on this because it just is not working. Can someone help?

Working with text width

Hello! I'm doing a FE Mentor challenge for practice and a recurrent problem I face is making text match the line breaks in the design. Here's an example of what I'm currently working with: 1st image design 2nd image my work so far...