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

How flex-item size are calculated when its width is given?

I have read a lot about flex box and have understood most of the part. However, there is one thing that I am not able to figure is that in case we have more than 1 flex-item inside a flex container, how their final width is calculated when one of them is declared its width that is greater/less than its parent container size. Here is the link to the pen I have written to experiment with flex: https://codepen.io/anurag1989/pen/yLRqPwO...

Web app pushes entire content up when virtual keyboard is up

Hi! I have a really easy layout. Header Body Footer...

Need some help with My HTML code

Evening everyone 👋 I was wondering if someone might be able to help Me out with My rather messy HTML Code, lol. I should note that I'm still relatively new to HTML/CSS/JS/etc.. so go easy on Me pls 😅 Anyway, I'm trying to create/replicate a sort of.. "introduction-animation" (Sure let's call it that for now, I guess 😂) for My website which is similar to the one on this website that I recently discovered: https://resn.co.nz/ ...

How can I Create a horizontal Infinite scroll with Images when I get the data from Graph Ql API's

Hi every one i wanted to create an horizontal Infinite scroll with Images when I get the data from GraphQl API's in order to do that what are the possible ways to achieve the infinite scroll for reference i have attached an video and you can find reference of it here https://www.framer.com/ can any one help me out in this ? Thank you in advance....

How to remove redundant class name when current classname is selected for color previewer ?

Probably butched on title. i have 9 color div, when one is clicked necessary js code is applied to get the class name of that div and it is then set as the primary color for the previewer. the issue is the class name keeps on adding to the previewer, is ther ea way to apply only one class? https://codepen.io/avinash-tallapaneni/pen/rNqVMKZ...

Blog thumbnail looks bad - object-position?

Hey guys, beginner here, I am trying to fix my blog thumbnails on https://expertphotoshop.ro/ and I tried object-fit, object-position but I really can't manage. I'm trying to make the image fit nicer inside the square. I guess "cover" is what I'm looking for, but I tried a lot of things in inspector and I can't manage. Help?

JavaScript Desktop/Push Notification

Hello, i have a javascript that sends a desktop notification whenever i upload a picture on my website. But if someone else uploads a picture while i'm not on the website, i dont get a notification. ChatGPT told me i need a service worker that runs in the background. But i just have no idea at all how to do that. So i would really appreciate it if someone could help me out.

pointer-events and the thumb on sliders

ChatGPT seems convinced that the 'thumbs' on sliders aren't treated as part of the input range type, ie if you set point-events:none the thumbs would still be clickable. And that looks right, here: https://codepen.io/nwoodward/pen/wvYjeev Both thumbs move....

Form validation, colour not changing

https://codepen.io/Aman-sghh/pen/xxyzNqx Im trying to change the colour of input fields to red and green based on the user's password and but idk what Im doing wrong. Can you please help me?...

Grid on the viewport

Hi everyone I built a grid I which all the grid should appear on the viewport but I have a vertical scrollbar my code:...

Need Help in Css

How can I get this type of scroll which i am scrolling in mobile view without the scroll bar can anyone help me please

Component library for tailwind?

So I am looking for component library for tailwind. Are you able to recomend something ? (or maybe not to use any, but then I am not designer and when I recall times before component libraries they were pretty hard times). Thanks

Twitch card hover effect

I have been messing around with CSS but couldn't get this 3d hover effect that Twitch made. I tried doing this but couldn't get those edges (I circle them in the image) ``` box-shadow: -5px 5px red;...

How to select an element that is inside another element on hover?

What I have written is in this pen: https://codepen.io/anurag1989/pen/oNayPOv The main problem is when I try to select the anchor tag (which is not hovered, and each anchor tag is inside a 'li' tag that in turn is inside an 'ul' with its siblings) which is not hovered, the CSS code does not work as expected. What is the problem with the code and why it is not working?...

Dropdown is behind content

I'm making a dropdown for my navbar but it's appearing behind the content, I event gave it z-index of 1000 nothing changed. I didn't even give z-index to that content I've no idea what's happening. Codepen link below https://codepen.io/Arslan-Akbar/pen/qBJKyZj...

The best approach for this >>>

I believe this is achievable with CSS...

Backdrop-filter doesn't work unless I set opacity on color

So, I am trying to apply glassmorphism to a page, and I noticed that if I use ```css background-color: #000000; opacity: 0.5;...

can somebody help me on this one?

i can't center the step-counter, i have the same code as the tutorial but i only use the scss and doesn't work , i even tried without scss and copied the whole thing still the same? anybody knows why link : https://github.com/clapycodes/step-counter link 2 :https://codesandbox.io/s/github/clapycodes/step-counter...

JS newbie – Setters

Hello! Long time ... 🫠 So why is this get function, when called at the end through console not printing Burger and 40? The setters are called with these values before. Part of codecademy js intro course...

Why do the X lines fix when I enable the 65th line in CSS?

Can someone explain it to me why are they getting centered when I apply for position absolute? https://codepen.io/harunjonuzi/pen/NWOzwvQ?editors=1100...