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

Recreating Polestar website's zooming in video on scroll

Hi all, I'm trying to recreate polestar website's zooming in video on scroll in an Elementor page, so far I am able to scale the video to fit the device height and width but I am not really able to implement like a long scrolling distance so when the section enters the viewport, the users will have to scroll for quite a lot before being able to leave the viewport and then the video returns to its original state This is the current code I have tried // Select the target section you want to check // This is the actual section from Elementor which I put a custom class in...

Is it possible to adjust section heights for different screen sizes?

Hey everyone! I've been struggling with the development of a website where I had set a min-height of 100vh. I don't remember now if it was applied to the 'section' element or the 'body,' but it was causing a significant gap between sections, especially on tablets. After I realized that the issue was caused by that, I removed that property (naturally). Now, I want my sections to occupy the entire height of the screen, but I'm having trouble achieving this. This specifically affects the view on la...

css grid: how does it decide the width of the columns/height of rows ?

why dont the columns/rows fit the content? If you dont set the column/row sizing, i thoght it would be auto to max-content... ive watched a ton of videos on grid and most of them were demos where they set the columns to repeat (3, 1fr) or repeat (6, 1fr) and the content was all equal so they needed all equal space; vrey neat and tidy. But i keep running into challenges on icode this where i dont want it to be 1fr or any set value, i just want it to fit to the content exactly and then be able to set the gap as needed. In the example with the yellow bg, the last column is way wider than the content, and there is no width set on the parent with display grid. where is all that extra space coming from? How does it decide the width of that column? ...
No description

Border-bottom

in my navbar link when i click on it i want to show the border bottom as the width of the content but it is taking 100 percent width i have tried using display:inline-block but it did not work"https://talhamustafa1.github.io/easyBankLandingPage/#action2...
No description

How to keep track of steps/step #'s in a multi-step form with JS?

How to keep track of steps/step #'s in a multi-step form with JS? I am working on a multi-step form challenge from devChallenges. I've got most of the form validation complete but I'm a bit stuck on how best to keep track of and display the current step number. Ideally, the dot indicators should be connected but I'm not worried about that at the moment. Right now, the step number increments higher than it should and clicking the button after the Success message pops up causes the content to disappear. If anyone has the time/energy to take a look and offer suggestions, I would greatly appreciate it. Thank you in advance!...

What is the best way to rack up that jank

Jank is basically how sluggish or slow a web page is. To say a page has a lot of "Jank" would mean that it has been arranged and developed inefficiently, resulting in a worse user experience (content load times)
I want to know how to do this as best as possible....

How to make responsive cards with flexbox

Guys, I'm trying to learn how to make responsive cards with flexbox but I'm struggling a lot, could anyone help me?

Border image

I'm a little confused about image borders regarding what kind of image and image extension that can be used as a border image, because when i try to use background image from this source https://pngtree.com/so/border and I took this border with a black ornate pattern and when I use it as Border image it doesn't work I've confirmed a few things like there are no writing errors in the source.

OOP Classes use cases

I recently learnt OOP and now I am confused about the use cases. I understand the concept so well, but not the use cases. I need help

Help with math in SCSS

Hey, I'm currently working on this project Right now what bothers me is the top-right corner, AKA the theme selection My current Svelte code: ```html <div class="tri-switch">...
No description

flexbox and border-box

Ive researched and found tons of conflicting answers on this so i thought i should go straight to the experts... So does flexbox respect box-sizing: border-box ? I have this code and the hover state of the buttons move everything around when the border is added. I am not sure if border-box isnt working because i dont have an explicit width on them or if its because they are flex-items. Does anyone have a definitive answer? https://codepen.io/Stacey-Hart/pen/zYyPmKB...

Dynamic amount of columns depending on children size

Hi all, I have been working on a Frontend Mentor challenge (https://www.frontendmentor.io/challenges/github-user-search-app-Q09YOgaH6) where I encountered a problem. The idea of the challenge is that a user can search for GitHub profiles by name and then display some profile information on the page if the searched username exists. So we have some dynamically entered content, which can have varying lengths....
No description

How to check if an element contains a class using JavaScript?

Hi all! Another question in regards to my stat module from before. I am trying to use JavaScript to check if the container contains the class "dark-bg" and then do something else. I have tried .matches() and classList.has() it keeps giving me an error. Any help would be grealy appreciated! https://codepen.io/rnkwill/pen/OJrzroj...

Z-index problem in setting the background

Hello everyone! I am working on a small assignment based on HTML/CSS which involves coding a information card. Here is the link to the codepen: https://codepen.io/anurag1989/pen/bGOybYr Now, the main problem is: ...

how to make images display on site when deployed on github

Hello, I uploaded my html, css and js files on github as well as my image folder, but when I deployed, the images werent displaying. I only saw empty boxes. The link to the site is below. willndaji.github.io/willGives-SDG-Website/ ...

@font-palette-value css

Is font-palette-value only used to change the color of a custom font, Can't font-palette-value be used to set other values โ€‹โ€‹such as setting the size of a custom font. I've tried it and it doesn't work, but on the other hand there are those who say it can I don't understand....

Best practices to make a React website faster.

Hi, I have been working in a early startup as a intern. I was given charge to building the frontend part of it. So the website is e-commerce and is getting more and more complex as we are building also the load time is increasing. Currently avg load time is around 3-4s. I wanted to know all the best practices and if you could point me to any resource that has helped you in your carrier i would be very thankfulโค๏ธ. I just want to learn more and more no matter how complex it can get.

aspect-ratio working cases

Hey, I was messing around with something earlier and noticed that if an image for example had a max-width on it, aspect-ratio doesnโ€™t work, but if it has a width, it does, could anyone explain why this happens? Thanks in advance

Need help in implementing scroll animations

Hi everyone, can you please help me decode this site https://fold7.com/, I have been trying hard to replicate it's scroll animations and parallax effect on cards, but I am still struggling to do so, can you guys please help? I am using framer motion for animations.