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

Class being Overwritten by :is

I have the following code : ``` <section class="card"> <header class="card__header"> <h1>FAQ</h1> </header>...

Why this border is filling whole screen ?

```html <!DOCTYPE html> <html lang="en"> <head>...
No description

How to generate this using css

i have tried setting border radius to : border-radius: 48% 48% 0% 0% / 10% 9% 10% 10%; but i am not able to match exact and does look right, the ends are not sharp in mine. codepen would be helpful 🙂
No description

Font height causing uneven buttons…

This design is using the Adobe font organetto-variable. Which is fine, however it does have some odd spacing on the bottom which makes the top and bottom spacing look uneven. I've been playing with line-height and block padding to no avail. Is there a css property I am forgetting to remove the spacing with predictable results?...
No description

Wouldn't a max-width of XXch for p tags cause lots of blank space on larger resolution?

I was watching "Under the radar CSS features for your CSS reset" video by Kevin and in it he suggests doing a max-width of 75ch on the p tag, he does say that is his suggestion and the value is up to us but I am thinking if you limit it like that then lots of dead space can start showing up on large resolutions right? And would that not got against the purpose of response design? Or am I miss-understanding something?

why {}+[] returns 0?

I was scrolling up the memes channel and saw the meme bellow, I understood almost every weird syntax but… I am unable to understand two of them: why {}+[] returns 0 and why (!+[]+[]+![]).length returns 9?
No description

Change the background color

Hi everyone I want rebuild this animation...

why is this div shrinking ?

```css *{ box-sizing: border-box; padding: 0; margin: 0;...
No description

Creating a Language Selector with Image Display Issue in HTML - Seeking JavaScript or CSS Solution

Hi, I'm working on creating a language selector where users can choose a country. Unfortunately, the images aren't showing up because HTML doesn't support displaying images in selection fields. Is there a way to overcome this using JavaScript or CSS to ensure the images are visible? Thanks in advance! <select name="" id=""> <option value=""><img src="images/germany.png" alt=""></option> <option value=""><img src="images/dominican-republic.png" alt=""></option>...

How use Google Calendar API to insert an event in end-user's calendar with Next.js

Hello, I'm trying to setup a call to Google Calendar API to insert an event in end-user with Next.js but I'm drowning in the documentation. I'm stuck on the authentication of the end-user. Here what I've done till now : - I created a OAuth 2.0 ID Client from Google Cloud Console - Imported the .json file in my Next.js application...

Why is the image getting chopped?

The image is getting stuck behind the scrolling div, i want it to pop infront of the scrolling div.. ` <div class="main-content"> <div class="main-content-scroll">...

gradient text input outline border-radius?

Do you have a technique for giving a text input a gradient outline on focus that has a matching border-radius with the text input? I found a solution for the gradient outline using border-image on focus but this doesn’t allow a border-radius here is the CodePen with border-image, this is the effect I’m looking for I just want the gradient outline to have a border radius as well https://codepen.io/jq712/pen/KKEzmJK

Next.js | What to use for icons?

Should I use <Image /> component from 'next/image' for icons or should I use something like react-icons for that instead?

Best way to "reorder" elements differently at different breakpoints

I have the following design I made for my portfolio hero and now that I'm going about coding it, I realize I made a bit of a problem for myself. In my desktop view, my CTA button arrives before my social links and the hand image is in its own layout section. In the mobile view, the social links seem like they would arrive first in the HTML and the CTA button after. I've decided I should switch over to trying to do my mobile side first today, as I had pretty much completed my hero focusing on the desktop view first. Here's the relevant HTML and SCSS, which works on desktop: ```html <section id="hero-section">...
No description

How to achieve this effect? and what is the name of the effect?

hey there, I'm trying to achieve this effect with html, css. can you please tell me what is the name of this effect? and how to achieve this effect? can you provide any useful resource? thanks in advance....
No description

Get ride of commas

I'm doing an english dictionary app, a problem I'm running into is: because of the map function, the code is displaying commas. I want to get ride of the commas, I thought about using "replace" but I'm afraid it will also replace the commas from the examples and definitions texts. Does anyone know how to do this or how to display the content in a better way?

Why subscribe doesn't work with zustand?

why when state gets update subscribe doesn't work? ```ts const useCartStore = create(subscribeWithSelector(cartStore)) useCartStore.subscribe(...

How to only target text content of element?

I have a div that contains a number of spans as its children and also a bit of text. The text is not surrounded by any tags, something which I cannot change. How can I target (i.e. style) only the text contents of the div, but leave any children of the div untouched? (I hope I'm not overlooking something very obvious here...)...

Rebuild an animation

HI everyone I want rebuild this animation...