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

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...

How to prevent refresh on overscroll on IOS

Hi, I have this small problem - refresh on scroll. So i have box inside my application with drag and drop feature. It works everywhere besides phones. On phones when I am starting dragging there is page reload. I read about something like this - https://stackoverflow.com/questions/29008194/disabling-androids-chrome-pull-down-to-refresh-feature But is seems it doesn't work. Any ideas ?...

How to make transition dependent on block height?

How can I implement the transition effect with a formula using js or css? I need the transition speed to depend on the height of the block. Tell me how can I implement this?

opacity of whole page changing instead of background image

hey folks I have a div with the following css ```css .firstBackground{ display: flex; flex-direction: column;...

Switch case

Hey everyone, I have this code ```js /* eslint-disable import/extensions */ import wait from '../utils/wait.js'; const monitor = document.querySelector('.monitor');...

Aspect ratio

Hi guys! Why isn't this image resizing to the aspect ratio I'm asking for? the img tag at least changes the max-width, but I thought this had to be done on the parent, in this case the figure tag. ...

Is there a way to properly check how your website looks on different devices?

I've seen that some components in my website look differently when using a Samsung A11 VS Xiami Mi Note Pro 10 for example. But I had to physically check this to know it, since on Firefox/Chrome responsive view it looks fine, so I was wondering if there's a (ideally free) way to properly check how your website looks on different devices. Like, truly simulation software?

Find closest match for a given color?

Hi, I just had this idea pop into my mind but I'm not sure how I could approach this problem, and before I go spend a few hours, days... or weeks researching this I wanted to ask around for some pointers. Probably some tool already exists as well but I don't know how to even search for it, although I'm still interested in learning how to build it myself as practice. So, the goal is: provided a valid CSS color, determine the closest it gets to other two color values. For example, say I have this value #eebebe, and I want to find out which of these other two values it approaches the most; #e5c890 or #ef9f76?...

CSS pseudo element before coming on top of the container instead behind of container.

hey folks I have this div ```html <Box className={styles.celebrityNights}> <Typography sx={{fontSize: '3rem'}}>Dj Shameless Mani</Typography> <Typography sx={{fontSize: '1.6rem'}}>10th March</Typography>...

Linking to a location

How would one link to a location of a business? Preferably just linking it to text to where if someone clicked or tapped on it, it would bring up maps to direct them to the location.

HTML Video

https://codepen.io/aldrinbright/pen/poZdEbb When the Chrome tab is out of focus the HTML video pauses, is there any way to keep it playing when the tab is out of focus?...

Create a div with no content then add a border when content is created or added to it?

So that is what I am trying to do. I have been searching for it because I thought I saw it but can't find an answer. Is there a way to do this with just SCSS?