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

Input design method

Hey, if you had an input design like the example in the image, would this be the sort of way you'd go about it, or is there an easier/more semantic solution? Perhaps anything unecessary i've included? https://codepen.io/deerCabin/pen/NWZKoyy I'd appreciate any tips, thanks in advance....
No description

How to create a button like in the example

How do i get the white border around the right button? i've tried working with border: but did not get the expected result.
No description

Theming system with SASS

Hello everyone, I'm a newbie in frontend stuff. To be fair I've never worked for the web, I'm more of a backend guy. A few years ago though I discovered I kinda like designing UIs. I have a desktop project for which I decided to use SASS to style my components. I studied and took some notes on SASS, I'm using the 7-1 pattern My main goal is to port Material Design 3 to the desktop....

eventListener on click

I'm dealing with a "simple issue". Basically, i want to put my code inside a function instead of passing directly in the button, but i'm having a issue where i don't know exactly how i'm supposed to do it, so. Here's the html, very simple: ```html <html !doctype> <head></head> <body>...

Css animation issue

Hi all I have a small or mabe big problem with animation in cssas you can se in pic. Animation works fine but when i reload page i get exta arrow as in pic. Here is my css code .arrow-container { width: 163px; ...
No description

Which course should I take

Hello, I wanted to focus again on my html and css skills. Now I happened to see that brad traversy https://www.traversymedia.com/modern-html-css-from-the-beginning had updated his html and css course that I bought once before. So i am re-doing this one again....
...

The box model does not fully apply to items participating in an inline formatting context.

Hello folks. I'm going through the CSS Demystified course, and I'm facing some problems understanding something that Kevin says in the 'Introduction to Formatting Contexts' lesson. I've got problems with the following text:
The box model does not fully apply to items participating in an inline formatting context. In a horizontal writing mode line, horizontal padding, borders and margin will be applied to the element and push text away left and right. However, margins above and below the element will not be applied. Vertical padding and borders will be applied but may overlap content above and below as, in the inline formatting context, the line boxes will not be pushed apart by padding and borders
The box model does not fully apply to items participating in an inline formatting context. In a horizontal writing mode line, horizontal padding, borders and margin will be applied to the element and push text away left and right. However, margins above and below the element will not be applied. Vertical padding and borders will be applied but may overlap content above and below as, in the inline formatting context, the line boxes will not be pushed apart by padding and borders
Does this mean that the space between items in an inline formatting context is defined by the line-height property? Thanks in advance...

@keyframes steps difference

Hey, Is there a difference between these two keyframes? Does the to and from mean something different compared to the percentages? ```css @keyframes xyz { from { transform: translateX(0%);...

Not Working?

I'm trying to write Margin-top: 0; but it's only giving me color recommendations Even if I type the whole tag out its only letting me put colors Please Help...
No description

Grid rows automatically created when no template rows defined?

Hey, I have 3 items in a grid container and haven't defined any grid-template-rows however it's automatically created some (3) to hold the content. 1. Is this normal behavior? 2. Are these automatic rows something you can do things with such as make the elements share the same grid cell etc? ...

overflow-x: hidden; overflow-x: clip !important; overflow-x: hidden !important;

I am trying to use this but it seems to not work no matter where I put it, I want to add it mainly for the header section when I am using the query for anything less then 650px wide. however when I do that and go to the section it don't show an arrow but still lets you slide over to the right . I am going to show you the css that my code is rendering versus breaking down the sections of scss. If I have to I will show you how I am using sass to work with this maybe it is that.

outline on focus-visible is not even?

So in my styles i have btn:hover and i add an outline. the first screenshot with the uneven outline is coming from my styles when i hover. but when i tab to the button, its an even outline. same if i change the outline to a border property. why is my outline/border so wonky and uneven? but in its :focus/:focus-visible state its fine? https://codepen.io/Miss-Fox/pen/bGPbVrJ...
No description

problem with input type number

Hi guys, when the value of quantity is 0 and I enter 1 the input field display "01" while the quantity is 1. Can anyone help me explain why ? I'm using MUI. This case only occurs when I use type number. With type text, it worked ```ts const [quantity, setQuantity] = useState(0); const [stock, setStock] = useState(0); ...

why does margin-top auto only work if parent is a flex container

Hey, i made this example for someone and i'm not quite sure the in depth reasoning as to why setting margin-top: auto; on a child (in this case nav) doesn't work unless the parent is a flex container (in this case .site-container), i just know it works and i'd like to understand a little more. I'd appreciate any help, thanks in advance. https://codepen.io/deerCabin/pen/OJeLPYW...

fix navbar at the bottom of the screen while leaving space so it doesn't cover content

I have a navbar that I want to be fixed at the bottom of the screen. It should not move for any reason, including not having enough content to fill up the screen. position: fixed solves this, but does not leave room at the bottom of the page, meaning that the navbar cuts off the bottom part of the content. The only solution I can seem to find for this is simply adding padding, but this seems like a hack, and I may need a different amount of padding on different devices. I could detect the heig...
No description

How do I grab the height of an element in a different .scss module and React component?

I have a component that I'm setting to scroll the overflow of but I need to subtract the height of my header from the height of the entire page. My header is in two parts. A static portion that displays across the entire app, and a dynamic portion that changes based on the path. The height of the static portion is defined, but the dynamic portion is dependent on font-size. I've attempted to grab the value in a React useEffect and store it in a CSS variable, but the CSS variable isn't reading. Ho...
No description

Why does this background image appear as 180px wide?

Codepen: https://codepen.io/Gaurav-Narayan-Varma/pen/zYQggZj I am attempting to a scale an image along both axis' by 2 while settings its width to the screen size, which in this case is 360px in width. I have the following code: HTML:...

Grid children not stretching + centering children alignment

Hey, i have two questions regarding this issue. 1. Why do the grid items not stretch to be the same size as eachother even though that's the default behaviour? Is that something you're unable to do with an auto-fit grid? 2. There are two different types of cards in this example, a regular one and one with a banner, what method would be best to center the icon and text to be aligned evenly across all cards? I've tried a grid approach in the example (the stretch needs to be working for this one otherwise i don't believe the ones without the banner would be perfectly centered) ...