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

making a image responsive in a flexbox

I think I am going to pull my hair out. I have such a hard time making images respond how you want them to. Anyone know any good help videos or articles? here is my issue that I have. ```<section class="hero"> <div class="container row"> <div class="hero_info"> <h1 class="hero_title">I Really Need A Coffee</h1>...
No description

CSS button

Can we create this button with bubble around and inside spacing after border with css only ?
No description

Phone overlap on a container

I have a figma design which is in the cover, and I want it to code using html and css, the problem is, I cant execute it properly using position absolute, I can position it in my desire look but I cant make it stay on that position, and second its not responsive. Sorry in adv Im using variables on other css properties. Any one can help me figure out how to execute this properly? ...
No description

Fade In Fade Out

I am wanting to do a fade in on scroll, then fade out on scroll. I have followed Kevins tutorial on this, but its not working. Is there another tutorial that I can add to my website, that I can use to make things fade in and out on scroll? I saw the one Kevin did 4yrs ago, but that one does not really help considering that he is using grid-column, which I am not using....

String to markdown

Problem: I have a paragraph string that is having multiple points I.e. ordered list and normal paragraphs before or after ordered list. It is not formatted. Is there way or any library I can use to easily identify paragraphs and lists and format it....

Looking for the effective way to use flexbox

Would like to know the best practice when using flexbox. I am attaching my code snippet and screenshot. If anyone have a better way, plz help me. ``` <div class="d-flex justify-content-between mt-6 mb-4 mb-sm-8">...
No description

Does anyone knows what this style called?

I've seen a lot of web designs recently with a similar looks as the attached file. dark mode with glassy feeling and purple lights around. Thanks in advance!...
No description

Self Positioning modal

I wanted advice on how should I go about this , should just simply calculate the space anytime an item is hovered with JS and add classes or is there any better CSS only way or any simpler approach

Is this Possible by Clip-paths and is it possible to animate Clip-paths ?

Hello everyone, can anyone help me with a design and animation question? I'm wondering what the best approach would be for creating this design. Should I use SVG animation or curves? I've tried using curves, but I couldn't get the shapes I wanted. Thank you in advance for your help.
No description

mousemove events

Hi everyone I'm a beginner with javascript I 'm learning mousemove events I have this code ...

font-size discrepancy using rem

Hey guys I am doing a project and I am new to front-end. Doing so, I found something which I cant understand. Could you guys help me with that. My browser: 1rem = 16px If i set font-size on using join__cards *....i get expected font-size. But if i set that on its grand-parent div...even though font-size is inhereted (You can see this in the screenshot) font-size is unexpected. I dont understand why this is happening. ...
No description

Unable to change SVG icons color in react

I have downloaded svg files and added fill = "currentColor" to each individual . THen i created a file to export these svg, so i can use it in other components. THis is where the issue happens, i cant change the color via CSS , i even added !important, still its showing default black color. ANyone knows how to fix it? ```js...

SECURING CSS CODE

How to secure and protect the css code from "source code"? Like when you click the stylesheets file from the html you will be redirected to minified css code

How do I import swiper.js package from node_modules into my main js.file?

Hey guys, So I downloaded the swiper.js packackge via npm and did exactly what the doc says but it doesnt work?!!? I even tried to import with relative path but it still does not work. So how do I have to import it?!...
No description

Is there a website or a repository in which we can see when CSS features were added?

Sometimes I'll be looking up a feature on CanIUse or developer.mozilla.org to check its compatibility, since I've been seeing some pretty useful features pop in and out, but some of them are still experimental and all, and some seemingly older ones still have some issues, while others are deprecated. So my question is, is there a place where one can find what year, version, etc. a property came out? And, second question, where can I keep myself updated with current and upcoming ones?

Date Input field for birthday, 'masking' the user input, incorporating 'show' button

I'm trying to create a birthday date input field inside of a React-bootstrap 'Form'. What I want it to do: Have "mm/dd/yyyy" as a placeholder ...
No description

How to horizontally center an element with translated content outside of it's width

I have a heading h3:
<h3>This is the width <span>extend</span></h3>
<h3>This is the width <span>extend</span></h3>
```css...
No description

Issue with Vite project

Hello everyone, I'm having an issue with the Vite project. The issue is when I run the command npm run dev I have an error: The specific module could not be found....

How can I make the top of this overlay transparent?

Hey guys I got this code and you can see it looks like like a "box"but I'm trying to make the top more transparent so it kinda fades it. not sure how to get this, any ideas? ```css .blog-post .black-overlay {...
No description