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

Vertically align ::before/::after elements to parent, where parent needs to follow inline baseline

You can see in the attached image how the flag before the username is not vertical-centrally aligned to the username. The username is an anchor tag with a ::before rendering the famfamfam flag png. The problem: when I set the anchor to: ```css display: flex;...
No description

Stripe Arrow Animation

So stripe.com has a little arrow animation (along with the dropdown) when hovering on a button which is from the bottom to top. I want to do the same stuff, with Tailwind. For now I have the code for making it from left to center ```css @layer components { .dropdown-1 {...

Fixing Border Of An Element

Hello Guys! This is a css animation that I made. https://codepen.io/SsadiqRoy/pen/YzdGPJN In this, there is an element who has the it border-style: dashed;. but there seem to be some thin lines underneath and above the border which I can't figure out how they are there and how to remove them....

Button way to the right

the home page styles are just width 100% height:25rem
No description

Problem with hovering over outside of element

Hi. It's a simple menu bar. When you hover over each one of left side links in the orange area, the related panel will open in right side of each one, and the hovered link will have a white background with black text color. There's a cool thing when you move your mouse from right panel to the red area (I marked in the attached image), the left side panel still has hover style, by mean, the white background and black text. But I couldn't implementation this cool thing, when I move cursor to the red area, the hover style will disappear....
No description

i dont understand this js function

good day guys, i google this function and asked gpt but still i dont understand. can someone explain to me? ```js function array_max_consecutive_sum(nums, k) { let result = 0; let temp_sum = 0;...

picture tag confusion...!

I was looking responsive images playlist, and in last part of that the discussion was all about picture tag and I understand that well. but there is one cunfusion. As shown in the image the source have a media query of (min-width: 960px) and srcset contains three image with 1,2,3 DPR + there intrinsic values. So my question here is that from onward 960px the browser it self find the best image using the PDR value + intrinsic value ? what is the science behind...
No description

project review

Hey, I was wondering if it'd be possible to get a review on a recent project of mine from a fem design, mainly about the code layout/structure along with methods for certain things that may catch your eye for being incorrect and the use cases of custom properties and utility classes as i'm curious to see if i've done anything inefficient, too complex or redundant etc with it. I've also set some z-index stacking on my hero section which seems to cause some issues with my cta interactivity so any additional tips on how to improve that would be amazing too! (i'm new to js so please excuse any messy code there), i'd really appreciate if anyone decides to take the time to look through it, thank you in advance! (mods- i wasn't entirely too sure where to post about this one so i apologize if it's in the wrong place, i'd be happy to move it 😄) https://codepen.io/deerCabin/pen/LYMZgxL...

i want to track how many people click on links on my website

i'm using Google analytics right now to track how many people entered my website and the setup was pretty easy but now i want to also track how many people click on certain links like social media which there's tutorials on youtube but they are complicated so if anyone know easy way to integrate it or have video explaining that in easy way i can follow that would be appreciated!

background-break property, how does it work?

Hi, i recently found out about background-break property in CSS and i have been trying to find documentation about this property but there is nothing on MDN an then i also tried to check what browsers supports it, but there is nothing on caniuse about this property. So yeah... I am kinda curious about this property. I found this property by looking at emmet cheatsheet for CSS but there are also several articles on the internet about this property, such as this...
No description

styling a parent based on a child

Hey, is it possible to style a parent based on whether it's first child is let's say a paragraph tag for example?

Getting previous data as well

Hello guys i am getting previous data as well after deleting a photo from fav component when i try to add another data 1. Try to add by heart icon 2. Now delete any one of the added data 3. try adding it again and i am getting prev data which i dont want heres the link...

Getting Started on a Sass project.

Good day, all! TL;DR at the end 🙂 Background: I've been learning web dev on my own for awhile. I started with freeCodeCamp, moved on to The Odin Project, and recently, I started taking an OpenClassrooms course (paid for my by employer 🙌). The way this program is structured, you don't go to classes. They tell you what you need to do for each project, but it's up to you to figure out how to do it. When finished, you do a presentation to prove you learned it then you move on. They do provide courses on the subjects, but I've found better results with Kevin's videos and other online resources....

Modal not hidden

Hi Friends! can you help me? I have a modal that is showing up without being called and i hapens when i style it. Specifically when I display: flex on it. Do you know why this happens? Weird thing, it happens only on that modal but not on the other one that also has flex https://codepen.io/Ari-Cohelo/pen/WNYoBjR ``` #deleteModal {...

Responsive pages

for some reason , , when I test the page with different Screen sizes , my IMGES will stretch like a rubber band .. here is the front page https://dallasmart.com/index_new1.php I am very new to this forum , so please excuse me if I am doing this wrongly. awk_grep@yahoo.com...

Background Appear on transition

I want the background to appear on a border-only box from the bottom centre as a sphere and then cover up the whole thing. some code : .wrapper{ display:flex; justify-content: space-evenly;...

How to make a transition on hover to make background appear but from the bottom center

this is the code .wrapper{ display:flex; justify-content: space-evenly;...

Adding Centered Title on this section

Hi Guys, newbie question - Under this Shopify section - I can't seem to add title heading using css. I tried few different codes but it seems that the section is not accepting the code. Any insights? Thanks.
No description

for, for of, for in loops

after finally starting to understand loops and how they work i havea curios question. Lets say we have an object like the one listed below and we need to loop over this object(obviously these will be more complex in a real life situation). ```let cars = { carName: 'Sorento',...