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

Grid gap having uneven gaps

So this is this grid wrapper:
<div className={styles.boxWrapper}> {boxElements && boxElements.map((box) => box)} </div> ...
No description

"declaration or statement excepted." problem

when i put an another else statement after a another else statement i get this issue. whats causing this and how can i fix it?
No description

Need Help Achieving Individual Scrollbars for Two Divs in a Layout

I have a layout with two sidebars, a left one and a right one. I want each bar to have its own scrollable area without hiding any content. The right bar is positioned absolutely to cover the entire height of its container. However, I'm facing some issues with the layout. What adjustments can I make to achieve this properly with the same html layout? Codepen: https://codepen.io/umanga/pen/MWRBwyV...

Why background-size doesnt work with only a button?

I simply have this ```css button { border: none; padding: 0.5rem 1rem;...

SEO stuff!

What is the best image format to use for SEO?

Can anyone help translating my figma design into css?

I'm really a newbie in css and i'm having difficulties in changing the font-size and general layout responsively
No description

Color Palette Generator For Front-End Developers and UI/UX designers

I know how hard it is sometimes to pick the right color for your project/design. A color palette generation tool will be a great help in such a scenario. I have looked few of the available color palette generation services online, none of them satisfied me. I wanted a color palette generation tool with the following features: 1. Generate 10 shades of a color from light to dark. 2. Being able to export the palette for CSS, SCSS, Less and Tailwind. 3. Preview of the color palette would be great. 4. Able to edit or delete color from the color palette....

Font-family when applied to body tag shouldnt it apply for all the elements thats under the body?

I am seeing an issue where there is a font-family specified in body tag, but it doesnt take to text area placeholder , is there a reason why and the only way to fix that issue it to apply specifically font-family to placeholder?

"Remove" inherited styles

Hi everyone! There's an internal tool we are using at work and I really, really can't get used to it because I find it too ugly and not very friendly. I'm writing a tampermonkey script to make the interface more pleasing to use. I haven't encountered any issues so far, but I'm kind of annoyed when I style my stuff and it inherits certain styles from the base site. I currently have one "entry point" dev element where I inject the rest of my own stuff, so I thought about using it to completely "remove" all inherited styles and use my own. Is that possible? Thanks in advance! PS: don't worry, the company doesn't care as long as I don't break anything for everyone else. Since I'm working in a team of a lot of people, I decided to preserve the old look and just "switch back" to it when I need someone to look at something....

Framer motion component lags for me

i was creating a custom cursor element and i found this implementation - https://codesandbox.io/p/sandbox/framer-motion-mouse-position-2b4sd?file=%2Fsrc%2FApp.js%3A78%2C11 i copy pasted the same code and when i run it , its not smooth at all and its laggy ...

Container query issue

Hi Am building a shopping cart here: https://stage.dembetheatre.org/cart.php I have some nice grid and flex working inside container queries on the <section class="basket"> I have a nested header element and cart items all in a subgrid...
No description

Prevent vertical flex grow?

Hello, I made an example of my problem: https://svelte.dev/repl/410dd49777c94e6d872bfa23fffb3272?version=4.2.13 Here you can see that the image grows larger than the .info element. I want to adjust the height of the image to the height of the .info element. Is this possible?...

How to make a background image in CSS?

I was looking for such a background image and I did't get one so I decided to make my one.
No description

Unable to receive email via SMTP JS

I run in to a issue when i submIt my form it shows me this what should i do
No description

font size scale

I've been experimenting with the method (found at https://every-layout.dev/rudiments/modular-scale/). It aims to create a perfect balance between font sizes by utilizing the previous size and multiplying by a ratio to decide the next size up. The ratio is decided based off of the root font size and the line height. In this case the root font size is 1rem and the line height is 1.5 so the ratio is 1.5. The scale looks something like this: ```css :root {...

NJK question

Hello, kind of new in vs code. I'm trying to use njk in my vscode but im getting this problem when using: --- --- How can i fix that?...
No description

Move to another webpage

Hello everyone i want to move to the another webpage on submission of a form i moved to the other webpage successfully but i do not receive the email if i do not add the code to move to the other webpage than my email is send successfully can anyone help me with this i want to move the other webpage and my form should also be submitted here is the codepen link" https://codepen.io/Talha-Mustafa/pen/LYagXQJ...

Aspect ratio conflict Chrome vs Edge

Hello, I have an issue with the aspect ratio CSS property. The images look okay in Chrome and Firefox, but in Microsoft Edge ( screenshots attached ), they look terrible and zoomed. Is there any solution to solve this, or any other alternative CSS that can achieve the same result in both browsers? I'm using an aspect ratio of 3.8 in the parent div, which has a display grid to achieve the masonry display of the images Here is my full css/html codepen example : https://codepen.io/captainAkuma/pen/ZEZRXBM...
No description

Selection after the tag

Hi everyone, I have this HTML: ```html...