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

What is the best practice for responsive font resizing?

So, as far as i know I should use the rem unit for fonts to not interfere with users preferences. But what should I use for dynamic font resizing? Like there will be a difference between the size of the font on desktop and on a mobile phone. AI suggested to do something like this: font-size: calc(! * @) Where: ! - default size like 1.5rem etc. @ - scale factor determined by the vw unit. Something like 0.5vw etc....

Help with css

Hey guys i need help i'm making an game launcher in electron so i'm using html and css and i'm don't know how to fix the place of the objects on the screen, and i'm using bootstrap css too i opened an issue on github if someone can help https://github.com/Good-Game-devs/LauncherGG/issues/1...
No description

Learning HTML and CSS

Hello guys, I'm learning HTML and CSS, I need some projects to build before moving to JS so that I can learn how to apply the things I learn... would really appreciate if some of you can share some projects (irrespective of whether they are hard or easy... my main objective is to learn)

not working on apple

I have an issue on my portfolio where i use different layout depending on the width of the screen but on apple it seems to be completely broken... link to my portfolio : https://mon-portfolio-sigma.vercel.app/ and th github repository : https://github.com/tototriou/mon-portfolio ...
No description

Is it possible to use container queries on container itself?

Hey guys, recently been trying to get back to container queries research, and found that styles don't apply on container itself. I think I saw Kevin do that in one of his videos, and now it doesn't work. Or maybe I'm trippin. Anyway example below didn't work. Google suggests using wrapper, but it doesn't go well when there is a list of such containers. I assume that I can use display: contents on wrapper, but overall wrapping doesn't seem like a good solution. Maybe someone figured out how to do this properly, or knows if its planned in specs. Any answer is appreciated! ```html <!DOCTYPE html>...

How to filter specific key + values in Javascript

I am working with the swapi API. I want to return an object but only specific entries. For example; Obj = { name: "Luke", age: 10, gender: "male"} But I specifically want to return a new object which is the name and gender with it's key name and value....

JS why everythingis changing in the array?

Hello, When I add (Hozzáadás button) object to my array with push, and after I add another object, why everythingis changing in the array? How should I have to add correctly?...

trusted HTML Element

Steps to reproduce: 1]As soon as i open the google chrome search engine ,and open a new tab and then open console to type document.body.innerHTML = 'hEY' it gives me an error stating This document requires 'TrustedHTML' assignment. 2]But then the same process when i open the new tab and in the URL I type google.com and open the console and type document.body.innerHTML = 'hEY' there is no such error . Could anyone have any idea about this....

Why is there a margin/padding?

Why when you run the animation by clicking on the checkbox, it scrolls the text creating some padding/margin on the bottom of the card?https://codepen.io/Bard-the-scripter/pen/vYwjKKo?editors=1100

Can't seem to understand the CSS em unit and the why should I use it for padding and margin

Basically what the title says, yes, I've watched Kevin's video about it, yes, I've watched the webdevsimplified video on it; but still I can not understand this. Also why should I use it over percentages ? Please explain it to me using simple examples, do not overcomplicate things

tr background image

Is there a way to apply a tr image to the row just once without it adding the image to every td within the tr? https://codepen.io/tvu1313/pen/vYwjGOj...

Best way to handle svg sizes

Hey there, what would be the best way to maintain svg sizes throughout a project? Should you keep the inline sizes they are given e.g. <svg width="x" height="y"></svg>? Or should you handle them similar to how you handle images by setting a max-width: 100%; on them and not setting the sizes on them until you have to in which case maybe setting up a few classes like .icon-small, .icon-medium etc could be an ideal way? Thanks in advance.

Div with fixed width How to make responsive ?

Hello, On the CLR course I learned that a fixed with with px is never good. But now I want to try to make this challenge : https://www.frontendmentor.io/challenges/qr-code-component-iux_sIO_H ...

sometimes i don't know how to use css correctly

so here's my shitty page, right now it needs either to use pixelized margin or to use position:relative & move it arround, the problem i'm having is when i actually hate myself and want to use position rather than margin, i get this btw i'm using tailwind main-section max-h-full relative top-24 h-4/6 flex flex-col ...
No description

clip-path not displaying cssbattle safari imac

Im having trouble understanding how clip-path works. I'm going through the cssbattle and clip-path works sometimes, but mostly doesnt display properly. In this battle, i started with a square container and used clip-path to cut out the object. but i cant get the clip-path to display. I tried the same code in chrome and firefox but yeilded the smae results.
<a><b><style>
body{background:#004416;margin:70 120;display:stacked}
a{width:160;height:160;background:#82CA9C;position:absolute}
b{background:#004416;clip-path:polygon(0 25%,25% 30%,50% 25%,75% 30%,100% 25%,100% 75%,75% 60%,50% 75%,25% 60%,0 75%)
<a><b><style>
body{background:#004416;margin:70 120;display:stacked}
a{width:160;height:160;background:#82CA9C;position:absolute}
b{background:#004416;clip-path:polygon(0 25%,25% 30%,50% 25%,75% 30%,100% 25%,100% 75%,75% 60%,50% 75%,25% 60%,0 75%)
...
No description

How can i improve this design more?

Do you have any suggestion for this design.

vertical centering

i am always getting stuck to align vertically at the center of the page,can anyone figure out to make it responsive https://codepen.io/kvandana451/pen/yLWKEjg...

Expanding row that is being clipped

Hi all. I'm working on a project to bring a graphical display to Home Assistant's Assist virtual assistant.
https://github.com/dinki/View-Assist/wiki/ This has thrown me head first into the unknown world of CSS (for me). I am trying to modify some of the cards that Home Assistant provides to full screen views and am running into an issue....
No description

How can I scroll it from right to left like a wave?

I want to scroll it from right to left, but it should move like a wave. How can I do this, or is there any JavaScript plugin for it?
No description