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

themogul

12/23/2023

How do I create exact form using CSS?

I'm struggling and confused in creating exact placeholder that is shown in Image and also don't know How would I create exact 'Phone Number' field with country codes and flags. This is the only problem I urgently need help. Any help would be appreciated.

Hungry🐻

12/23/2023

My footer isn't sticking to the bottom

I have a contact page. Now i know my main isn't filling the space but i assumed the footer will be the last element but there's a space after the footer which i don't want. This is the code pen : https://codepen.io/oti-adjei/pen/yLwLGze

WHIZZBBIG

12/23/2023

How should I create the layout in the image using grid

I am trying to create this type of layout on the grid but am not sure how i could achieve it with it. also if you know any type of grid layout generator tool that would be very great help!

coder

12/23/2023

live server not working(vs code)

Hi live server has been working in the past. But yesterday i got this error message: This extension has been disabled because it does not support virtual workspaces. I have tried restarting vs code but i cant get it to work. I was wondering if someone can help me.

sheikh

12/23/2023

Font family not working on html,css

```css @font-face { font-family: 'Main UI'; src: local('./BebasNeue-Regular.ttf'), url('https://fonts.google.com/specimen/Bebas+Neue') format('woff2'); }...

proudyyyy

12/22/2023

Can animation-timeline be used on multiple selectors?

So what I am trying to achieve is applying multiple animations with an animation-timeline property being set on "scroll();". I was refering to Kevin Powell's video for the parallax for this (https://www.youtube.com/watch?v=Qj0Qx8HpNUo&). The issue I am facing right now though is that as soon as I hit the animation-timeline property on more than 1 selector inside my CSS that it's not working on scroll. The animation itself is correctly defined (no spelling mistakes) and set properly with the anim...

roelof

12/22/2023

How can I animate my accordion menu and still keep in accesbile.

Hello I wonder how I can animate the opening and closing of a carroussel but still keep it accessible. Code so far : https://github.com/RoelofWobben/faq-accordion Live url : https://roelofwobben.github.io/faq-accordion/roelof.html...

Dries

12/22/2023

Fetch request returns Promise

Hey , I got a country page with links to border countries , now are the border country names not the full country name so I need to make a fetch request for the full name but when I do the result becomes a Promise (see picture 1) ...

cheems

12/22/2023

Cannot achieve difference between width: 100vw and min-width: 100vw

I made two div containers and gave them width: 100vw and min-width: 100vw respectively. Now I set some nowrap text inside them. According to my understanding, min-width:100vw cannot have less than 100% of the viewport width but it can expand to accommodate the content inside it, but in the code I created, my text just overflows outside the container, why is that? If my technique is wrong, what could be the right way to demonstrate the difference between them and which one I should use as a beginner? Code I created is as follows : ```html <!DOCTYPE html>...

clevermissfox

12/22/2023

A11y masters....help

I have an accordion element ``` <div class="accordion-wrap"> <button class="accordion-btn row ai-cen jc-sb gap-2" aria-controls="accordion-content-1" aria-expanded="true"> <h3>When will my order ship?</h3> ...

Abhishek

12/22/2023

All buttons should take the same size as the one with most content

I have a grid setup here having 2 colums and I am passing buttons with different content size inside them , The problem is whenever the screen size is reduced the buttons become uneven and I want to avoid that any help regarding this will be appreciated thanks

Abdiel Peguero

12/22/2023

Toggle light & dark mode on and off not working

My Javascript is not working. I am using css variables to implement light & dark mode in my portfolio website. But for some reason, I am not able to make my js function work. Any help? Here's my code https://codepen.io/Abdiel-Peguero/pen/xxBxEoz...

xstreme

12/21/2023

I am having display problems

I want the two images to appear under the banner, how would I do this as I have been muddling around with different things for 30 mins 😭

kaleigh

12/21/2023

Do I need a relative import if stylePreprocessorOptions knows the location?

Hi! I was following along with the video that explains @use and @forward, and some other random docs I found, and they led me to believe I could add @use 'mixins' as mixins; in my component's scss file instead of having to drill down to the exact location, like: @use '../../../../assets/styles/mixins' as mixins;? My co-worker says I can't do that because when he clicks on mixins in VS Code when @use 'mixins' as mixins; is in the file, it doesn't take him to the correct place. It does the same for me, but the mixins.radiostyle() style actually works regardless, so it seems fine to me. I've included the location of the folder inside of stylePreprocessorOptions , so isn't that enough?...

M@HeR

12/21/2023

css problem grid

My problem is i have container 860/1300 for example I have list of items And i have dynamic col and rows for devising this container I want to see in this container rowxcol Divided in full container and when i scroll i see the rest of items with same view...

bored

12/21/2023

Bootstrap Grid Doubt

had to make this, so i'm trying to make this responsive layout with bootstrap grid, the green box in medium and large screen should extend as you might already have guessed. But i'm unable to just using the concepts of grid in bootstrap. I do know how to do this with css grid template area and css flexbox but is there a way to do this with bootstrap grids only ?

J0K3RY

12/21/2023

Little idea to start this?

Hello everyone, I am a beginner as a junior dev, here I have a design that I would like to make, I would like a part to have a form of folder and currently I have tried several ways on codepen but none It's effective and I admit that this design is giving me a hard time. Do you have any idea where I could start? A big thank you to you.

Suggon

12/21/2023

Animating `aspect-ratio` property

(this is a simplified version of my earlier post here) Pen link: https://codepen.io/Suggon/pen/NWJKZXE i've designed a two-column image layout with two checkboxes to toggle how the images are laid out. "Merge" merges the two images using translate and "Clip" sets the aspect-ratio of card__hero image to 2/3. ...

Matt

12/21/2023

Preloader w/ JS

Hello, I'm trying to create a preload transition for each time a page is loaded. Here's my code: https://codepen.io/Matt-CopOffMatt/pen/NWJKmbK However, when adding the .hidden class, it doesn't seem to transition as I expected (fade to 0). I thought by adding an element and having transition with css, it would fade out. Does anyone know what I'm doing wrong?...

kaidecoder

12/21/2023

Form2's button controls Form1's input fields.

https://github.com/kaidecoder/form-validation-project/issues

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