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

A div does not want to take a specified proportions inside the container

hey , i am facing a problem in css , i dont know why a div who contains some text and a form , does not take the height of its container trying to make it look as the other example, i tried to set the margins and paddings but it sucks , something is wrong, please some solutions please here is the code i am using ```css .form-page{...

Taken down my contact form, put in social links instead, why is email blue..?

The only code I've used for the contact section is below, so I'm not entirely sure why my email is showing up as blue, I thought I covered all bases with hovered, clicked, active etc.. ```.github, .linkedin, .mailme,...

Question regarding "positions" in CSS

Hello everyone! So my question for you today is: Are "positions" (position relative, absolute, fixed) still being used in CSS today? and Is it good practice to use them? ,

how to fix the display for different widths

i did this frontend mentor challenge https://www.frontendmentor.io/challenges/stats-preview-card-component-8JqbgoU62 and i'm struggling with the width and height , i think it works for the small mobile display and the full screen is okay but it's not working properly for the widths between. https://codepen.io/lzguijjm-the-decoder/pen/dyQazYd https://codepen.io/lzguijjm-the-decoder/full/dyQazYd...

astro-podcast website. How to make more episodes keep showing up as you scroll

How can I implement this effect: Eg: https://hubermanlab.com/ (The podcast episodes keep showing up as you scroll.) ...

"transform: translateZ" not working as intended even when "transform-style: preserve-3d" is set

I'm having difficulties following Kevin's "3D tilting card Effect..." tutorial, I have a container that follows the mouse perfectly but I want the children of the container to have a translateZ set so they look like they are hovering above the container, the problem I am having is that, even when "transform-style: preserve-3d" is set on the container, the translateZ property on the children is not working as intended, children just seem to scale up. I have a layout comparable to this in my main svelte file ```html <div class="container">...

Regarding CSS shapes

There is a new ui tryout where I am working, i am not sure how to achieve this shape. Like the slanting on the edges of the left section and bottom right section. Can anyone give me suggestions on how i can approach it.

Astro.js map data into components

I have a list of objects I would like to map into components in Astro. Here's my Carousel.astro component: ```jsx...

Layout Explanation

Hey, i know this is a pretty simple topic for most but sometimes it's a little difficult to grasp the right way to create the sizes of elements for certain layouts in the way it's supposed to be done using grid and flexbox. I know setting fixed widths and heights is bad practice to i'm trying to figure out the most efficient way to do these things. I'll use some images as examples. In image one of a grid layout, for the sizes of the div squares is it a matter of defining a max-width for the container they're in and stating the sizes using fractional units and percentages in grid-template-columns/rows etc to get the sizes you need or is it a matter of defining sizes of the divs using width/height? In image two of a flexbox layout, where let's say one flex item div is larger than another as we can see here, is that a matter of using the flex property on the divs or setting the first divs height in percentage to take up more of it's container e.g. height: 70%;...

swiper js is slow in touch screen

I use in my app vertical swiper js but in production i see that swiper is slow on scroll react app and i use swiper js v8 I want to replace swiper with html and css no package if you have sample i will be thankful And i want to rotation effect and coverflow on selected categories...

Why do both buttons call my function?

I have a form: ```html <modal> <form id="bingo-settings-list"> [...]...

Question regarding responsiveness

Hey guys, so I have a question regarding making responsive videos, watchin @kevinpowell 's course he says that when writing code mobile first we should stick to using breakpoints (as less as possible) and use min-width on our media queries so, I understand that and how it works, but I am curious on knowing if we should use max-width on our paragraphs and titles before using media queries or should we just stick with just using media queries when things break. (I am talking when writing respons...

Background Image Opacity Video Question

I thought Kevin had a video about maybe a year or so ago that showed a 'newer' easier way to add opacity to a background image without doing the whole duplicate div, absolute positioning method. At that time it wasn't supported 100% but probably is now. Any ideas which of his videos it was? It's in a SvelteKit site that is not live yet... I might be losing my mind; seems like maybe it was adjusting a type of function or something :/

need help in switching `px` based media query to `em` based media query

Hey, folks after finding out that em is better unit to use with media-query instead of px I have decided to switch from px to em based mediq query. So, lets say I have this media query in px ```css @media (max-width: 868px) { ....... }...

Unable to change background color for spotify box

here is my code pen link"https://codepen.io/Talha-Mustafa/pen/YzRdPyR" the background color for box is not changing

how to make gsap scroll stop for a sec then scroll next? w pin?

hi there. there are 5 cards. when one is scrolled and finishing its animation, i want it to stay so ppl can read it. what parameter to use? thx! ```import { useEffect, useRef, useState } from 'react'; import React, { useLayoutEffect } from 'react';...

Unable to input into a textfield?

Hello! I was practicing automation on a website, and found out that I'm unable to input into a input field? I tried all of these:
input.setAttribute("value", "100");
input.setAttribute("value", "100");
```js...

Css animation help

How can I achieve this type of animation?