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

Alex Mason

1/20/2023

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

interpod

1/20/2023

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

Eighth

1/20/2023

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?

Aditya Kirad

1/20/2023

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

NazCodeland

1/20/2023

Switch case

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

Å Marlon G

1/19/2023

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

Muhct

1/19/2023

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?

Joao

1/19/2023

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

Aditya Kirad

1/19/2023

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

kingsilver420

1/19/2023

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.

Aldrin

1/18/2023

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

althepal78

1/18/2023

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?

Matthais

1/18/2023

Gap between borders with Grid

I help on another server where a newbie is learning position too early IMO (I agree with a learning order like https://web.dev/learn/css), so I wanted to push them towards Flexbox & CSS Grid early instead. They were making the pictured, but when I try to reproduce it using CSS Grid, I get a small gap between the borders and I can't figure out why: https://jsfiddle.net/Matthais/3m9r4c1f/

~MARSMAN~

1/18/2023

Cannot read properties of undefined.

Hello 👋 So I'm trying to create a class for an alert card. And now whenever i try to use the class methods it throws an error saying Cannot read properties of undefined ( reading 'classList') What am I missing here?...

Lofty!

1/18/2023

Blob like hover animation

The vercel dashboard (https://vercel.com/dashboard) has this nice hover animation on the navbar. How would I go about recreating that effect, keeping it accessible too? (Nextjs, so it's stuff is all garbled up and bundled)...

Leke

1/18/2023

Tailwind CSS

Hello guys I just started using Tailwind CSS and I find it very interesting to use but I've got a question to ask. ⬇️ How else can Tailwind CSS be used without writing it inline html tags? Like is there another way to use it rather that just writing them in the tags, my code really looks ugly after writing lots of it in tags and I'm just curious. What if I've got a big project to work on ? Is that the only way to actually use tailwind?...

Gashy

1/18/2023

Query about compiling JS assets

Working on an old project using webpack, just for a reference it has a main.js file which is importing files from the components folder, pretty standard stuff. Ive noticed that some of these component files are importing the same package in multiple components E.G. foo.js is importing package 1 bar.js is importing package 1...

aolko

1/18/2023

Separate conditions depending on children

How do i specify separate conditions if element has different children? For example - if a .button only has .icon - set the aspect-ratio to 1/1, if it has .icon and .text - unset the aspect-ratio and set the width to 100%...

Jacques

1/18/2023

Background image

Hi all there was video where @Kevin had background image without css background image but rather div that is paced on background. Don't know if my explanation is good but hopefully someone can point me the video or how to do this.

kingsilver420

1/18/2023

VSCode Help

I'm trying to work on a project & build a website for my bosses vape shop. I'd ask the general question, but I run into too many problems & I'm still a beginner. I struggle with things that I'm sure most people shouldn't & I just don't know how to put it into words or how to fix my issues. Does someone care to chill with me for a bit & help me work on things? Help me understand how things work & help me with the issues I run into? I get worse & worse everyday & I'm loosing my motivation. I love...

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