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

help

john_galt

4/26/2023

Why div around flex-container breaks overflow scrolling?

I'm trying to make the flex-item be scrollable, but when adding wrapper div around flex-container the scroll is break and the entire page is scolling instead of content in flex-item Example without div wrapping flex-container: https://codepen.io/Dimi_0-o/pen/qBJmKKN ...

Aldrin

4/26/2023

Grid Layout

How to create a card layout like this in same container

Khoa

4/26/2023

How to create this weird shape in CSS?

Some similar example would be great too. I can't google it cuz I dont know what's called.

Malik

4/26/2023

Search Preview

I'm trying to make a searchbar using json data and want to show the result preview of the result depending on the input. I've been successful in using filter() to get an array and now want to use that data to show the preview like image, name etc & I've done it but, Problem: The issue is after the first input whatever array i get the preview uses that and doesn't matter after that whatever input I used it doesn't use the furthur filtered down array. Like it's now continuously not using the result array, just on the first input. Issue found: (need new solution) it does use the current result and shows the preview as i want now the issue is it does it under the previous preview and doesn't resets it. How should I get it to reset or remove the previous html on every input...

Sste

4/26/2023

Problem with a button

I am having problem with the "pomodoro" button. The standard of pomodoro is 25 minutes, but when I click in the 'short break' button or in the 'long break' button and then I try to come back to the pomodoro button which is 25 minutes and simply don't work. What is the problem and how can I solve it? https://codepen.io/Sstephanyyy/pen/MWPmaNo...

Khoa

4/26/2023

Is it possible to have dynamic letter spacing in CSS?

https://rsms.me/inter/dynmetrics/ I was looking into this Inter font and was wondering if it's possible to have like a calc() to gets me the best letter-spacing in CSS based on the font-size...

Kiran

4/26/2023

How to Achieve multiple style of cards by align 3cards in BG and 2cards on top of 3Cards in grid ?

Hi Everyone There are five cards and those need to be aligned as per the image I have provided will that be possible by grid ? or what can be the best approach to achieve that kind of style in React. Thank you in Advance....

Avinash

4/26/2023

issues with collapsing a container.

im trying to collapse the container so that all child div except title is displayed none and the first div(title) is roatated by -90deg. im facing issues where the child div is rotated but its not placed properly, i tried using flexbox properties but to no avail. i cleaned up somecode. few icons are missing, dont know how to import icons in codepen https://codepen.io/avinash-tallapaneni/pen/MWPyvQe...

Malik

4/25/2023

Two arrays

I've got one array that I fetch from my local json file. ```json [ {"name":"namestring", "img": "imgsrc"},...

Incognitus

4/25/2023

How to make <li> bullet just stay inside container, not move text ?

Recently I tried to achieve such effect with list-style-position: inside, but it appeared that in this mode bullet moves text. I want to know, if I can get desired effect with regular bullet or go further with css hacks.

Joao

4/25/2023

Adding pseudo-class to elements with JavaScript

Hi, does anyone know of an easy way to add pseudo-class styles to an element created with JavaScript? For example: ```js const button = document.createElement('button'); button.style.backgroundColor = 'lightblue'; button.style.color = '#333';...

Ã̶̅n̴̊͑k̴̾͌s̵̒̐e̵͗̒l̴̿͋

4/25/2023

Object-fit:cover; reduces quality of images, alternative?

Hi, I've been using aspect-ratio: 1; and object-fit: cover; for a while now, and I've just found out it reduces the quality of the images significantly. Is there any alternative to it, or a roundabout that I can use? The only thing I can come up with is using photoshop to make the desired shape.

Allen

4/24/2023

Images loading slowly or not at all when deployed to Netlify

Hello, I have a react page that I have just deployed to Netlify that has a bunch of images. Everything looks fine in localhost:3000 but the images in the deployed website either dont load or load very slowly. Im still a little new to web dev so maybe this is an easy fix. I'm wondering if creating the project with NextJS would help or not. Does anyone know why this is or have any solutions? I can show my code if that would help, thanks.

glutonium

4/24/2023

hop issues

https://codepen.io/-bloop-/pen/MWPprJV so i basically just have a simple arc.. everytime u click it is supposed to hop. which it does, but the problem is, if u keep clicking, it seems as if with every click, it hops higher and higher, and doesn't hop the same height. why is it happening and how can I tackle this problem? also currently, when u tap it just teleports to the calculated position, i would like it to gradually go up like it does when it comes down.. how can I achieve that as well?...

JC-Dsc

4/24/2023

Parameter not defined

Hey guys,i hope you're all good and having a good day. I'm doing a JavaScript course and i can't really figure this out. I'm trying to display under the buttons another 2 paragraphs,one with the result which it does display when you play the game, and another one that displays the hand of the player and the hand of the computer. The problem is with the "hands" paragraph, on the console it keeps saying "Uncaught ReferenceError: playerMove is not defined ". But "playerMove" is a parameter and i don't know what to do. I tried researching for similar problems but couldn't find an answer,declaring the parameter,reviewed the code and nothing. Here's the code pen https://codepen.io/JC-Dsc/pen/BaqWdqd?editors=1111...

MoonGazer

4/24/2023

Side Project help

Hey guys, so I have this idea to be my side project and I need your input or help on this one I wanna create a website where I would show pictures gallery Can someone give me an example of this kinda website? What is the best way to do the web? Do I make admin dashboard to publish a new post?...

vince

4/24/2023

When should I set explicit widths/heights for images to increase CLS score?

Always thought it was bad practice, but I'm checking Page Speed Insights and it's telling me to add explicit widths/heights so that it improves my CLS score. I do have a couple images that can be fixed, so I did make them fixed with explicit width and height and that was enough to bump my page to 100 performance. Curious about the nuances though.

StoicWanderer

4/23/2023

Z-indexnot working on pseudo-elements

Hello team, I am working on some pseudo-elements with backgroung-images, and my problem is that no matter if i set the ::before and the ::after with pisition: absolute and z-index lower than the parent element, they don't go under the parent element covering my patent element. Why is that? And how can i solve it? ``` .tartkozep::before { content: " ";...

Avinash

4/23/2023

width: calc(100% -2rem); returns invalid property value in inspector

so im not sure where the issue but something is happening due to content editable div i gave width:100% for parent. first child is an image with width of 2rem , so for second child i gave with = 100%-2rem https://codepen.io/avinash-tallapaneni/pen/MWPyvQe...

Avinash

4/22/2023

text area not growing in height when text is entered.

https://codepen.io/avinash-tallapaneni/pen/MWPyvQe i gave min-height:8rem and height: auto. when i enter text its not growing in height instead im getting scroll. how to fix this?...

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