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

ramtam92

10/16/2023

responsive videos, loaded based on view port width

I'm trying to find the best possible way to add responsive videos to the background of my site. I would have loved to use something like srcsets for the picture element but as far as I see, thats not a thing yet. Are there any css native options to do responsive videos – loading different videos for different view port sizes? or would I need to go down the javascript road for something like that?

anand

10/16/2023

Div element should have same height based on the background-image height

Hi All, This is first time i am asking a question, if you see any problem in QA pattern please help to correct me that is highly appreciable. Question :- how can any div/html element will auto-adjust their height based on the background-image height....

vince

10/16/2023

Would you make this a table?

I feel like this looks like a table so it should be a table; but it would be much harder for me to style this I believe as a table.

pary

10/16/2023

Adding bc to a buttton

i tried googling and found a way that worked for most people which was using the 'background: url()' selector, but that still didn't work for me. so somebody please help. heres a codepen: https://codepen.io/staticoly/pen/poqXopY...

Erov

10/16/2023

button collapsing with footer

I have a scroll to top button in my React web app. I want to position it further from the bottom whenever it reaches the footer. So it wont be collapsing with footer and block the links in mobile view. Can you help me how can i achieve this...

Aditya Kirad

10/16/2023

problem when using javascript to get the actual viewport height

hey folks this is my css ```css main>div { height: 100vh; height: calc(var('--vh', 1vh) * 100);...

Stephin Maju

10/16/2023

how to do this text animation??

Text animation

JOY

10/16/2023

how to export timeOut variable in JS

I'm making a Js memory game using express and mongoose ```js function incrementAttempts(){ attempts++;...

ram

10/16/2023

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

ail3ngrimaldi

10/16/2023

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

clevermissfox

10/16/2023

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

Moni

10/15/2023

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

savvystrider15

10/15/2023

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

PilotP

10/15/2023

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

Chaves

10/15/2023

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?

Abrar

10/15/2023

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.

Adedoyin Adeyemo Muhammed

10/15/2023

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

Avi

10/15/2023

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

clevermissfox

10/15/2023

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

onkelA

10/14/2023

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

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