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

snxxwyy

7/11/2024

grid-auto-columns function

Hey, i'm struggling to understand the in depth way grid-auto-columns (or rows) functions. Is there any reason as to why these aren't displaying next to eachother? Or does it have to have another property in order to work? I always thought this would automatically place them next to eachother but i've never gotten round to properly using this so i might have misunderstood. I'd appreciate some insight, thanks in advance. https://codepen.io/deerCabin/pen/LYKEBMx...

agdesign

7/11/2024

Inverted Border Radius

I have recently found myself liking the minimalistic look of inverted border radius when being used in a website. I am having some trouble though laying out my content and then breaking them up in sections. I have added a couple of images that I am inspired by to create my portfolio based on this style. Does anyone have any pointers of how they progressed through the pseudo elements? And have you accomplished anything like this before?...

Dreidel

7/11/2024

Input with icon inside

I'm struggling about styling an input for a challenge, that contains an icon inside. Currently I'm trying with the ::after pseudo-class, tried with content and background-image but the icon still doesn't show. Obs.: I'm using Material Symbols to get the icons now, but before I was trying a url to a .png from a icon (when using content: url(...))...

Venyl

7/10/2024

Can't override Open-Props custom property

I've been using Open-Props in my Svelte projects recently. I've tried overriding --shadow-color and noticed that I'm not able to. Here is my code: ```css .meter-bar { --shadow-color: 50 100% 50%; box-shadow: var(--shadow-5);...

snxxwyy

7/10/2024

grid features use cases

Hey, i have a few questions regarding some grid features: 1. When should you use the span keyword over line numbers? e.g. grid-column: span 2; instead of grid-column: 1 / 3; 2. In what situations should you use grid-template-areas or named line numbers e.g. [xyz-start] 1fr [xyz-end], is it so things are easier to keep track of? ...

hikari

7/10/2024

nested page and dropdown menu

hye Any WebDev or DevOps? how is the most common people usually do/possible way? If they wan to create subpage/nested page The nested page then accessed via dropdown menu in the main page...

Justine

7/10/2024

what is the problem if the body s not wrapping its content?

how do you solved body not wrapping the whole screen?

LLL

7/10/2024

handling error in the vanlife app (react router 6 scrimba course )

github repo :https://github.com/Walid-MHC/van-life hey guys i am doing the react router 6 course on scrimba and i got stuck in the error handling section , if anyone can check my code and tell me what i did wrong if would be great , it's in the vans.jsx page and the api.js...

Jiri

7/10/2024

Adding title tag dynamically with jquery

Hey everybody, what you see is a list of members of our hiking club. It's 210 spans in one div, each span with a number representing one of our member. I would like to add an title (bubble) with a member name to each span as I hover over the span. So far I was able to use jquery to add a title with the same text (using attr() method). Is here anybody who can give me an advice how to add title with a name of the member corresponding to the number? My idea is to store the names in an array and tha...

Cosy

7/10/2024

Help with using a js library

hey! i need help using color.js (https://github.com/luukdv/color.js/) but i dont really know how to use libraries.

Luciana H.

7/9/2024

grid-auto-rows impossible to change?

grid-auto-rows: minmax(min-content, 1fr);

grid-auto-rows: minmax(min-content, 1fr);

when a grid has this setting, is it impossible to define the last child to not stretch and have a different height?...

snxxwyy

7/9/2024

can this layout use a flex wrap rather than a media query?

Hey, i made this example for someone with my go to method being that the flex container's flex-direction changes to row in a media query. However i feel like that can be simplified using a flex wrap which i'm trying to learn the in depths of. How would i go about doing this? My first thought was to limit how small the cards can get with width or flex-basis but i'm not entirely sure of the most efficient way to go about it. I'd prefer that the cards don't individually wrap but rather all wrap at once so they can all either be all in a row or all in a column. Or is a media query the most efficient way? Thanks in advance. https://codepen.io/deerCabin/pen/qBzEWKe...

bashaR_07⚡

7/9/2024

Trouble in using "em" "rem" and "%" in Grid- Need Guidance

I am using Grid in my recent practice and tried to use relative units for elements of grid items. As this is suggested that we shouldn't give height or width while using flexbox and grid so did i and couldn't use % unit for elements in grid items as height and width were not set . And while using "em" , as the font size of the element or its parent is not set and it willl use root element 16 px which would be same as using "rem". After using "rem" , content is overflowing out of grid making it irresponsive as 16px of root doesn't change with dimensions , so i would have to add multiple media queries. Btw, i like to use %. What should be my approach making it responsive? I want to know multiple ways of it, if someone can tell me? Checkout my Code Pen : https://codepen.io/Mubashir-Hassan-the-scripter/pen/NWZWmZr...

Aldrin

7/9/2024

Website Animation and transition

https://noomoagency.com/ anyone know how can we develop this kind of website animations and transitions...

asdf_jkl__

7/9/2024

css grid overlap

I need to create the overlapping layout like in first image But I am getting output like this second image My code is also attached codepen link: https://codepen.io/rohan031/pen/abgbMGZ...

0012039810328

7/9/2024

Uncaught ReferenceError: $ is not defined

The error is at the: $(document).ready(function() {

Takyon_is_Online

7/9/2024

Need help with my sizing and display of my flex items.

I have my flex items wrapped in a div called col. I put flex: 1; on the class but the boxes don't look to be the same size and the calculator box is pushed to the right leaving no space. I put a border around the col class to illustrate what I am talking about. https://davesamuels1998.github.io/four-card-feature-section/ https://github.com/DaveSamuels1998/four-card-feature-section...

kabir

7/8/2024

Two different shadow effect

#front-end How can I make this kind of shadow effect (like picture below)? I've tried this code but didn't get expected result. Here is the codepen link: https://codepen.io/kabirsumn/pen/NWZWzYa here is the CSS code I aplied on the element: ...

snxxwyy

7/8/2024

what decides when these flex items wrap?

Hey, i have two input elements in a flex container. I've overwritten their user agent fixed width by applying min-width: 0; to them, allowing them to shrink. I've also applied flex-grow: 1; to them so they fill the space equally. The flex container has flex-wrap: wrap; on it however considering that the children have min-width: 0;, theoretically meaning they can shrink to nothing, what causes them to wrap rather than doing that? Thanks in advance. https://codepen.io/deerCabin/pen/GRbRxjO...

nnnakuuul

7/8/2024

What is the difference?

What is the difference between

flex-direction: row-reverse;

flex-direction: row-reverse;

and...

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