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

Issue with Implementing Jumping Masonry-Style Layout in CSS

CSS Grid & Flexbox Hey everyone, I'm struggling to achieve a masonry-style layout where grid items can rise up and fill in the gaps left by varying item heights. See added screenshots. Here's the breakdown: Problem: I've been trying to create a responsive layout where the grid items move up to fill in the empty spaces above them, much like a masonry layout. However, neither Flexbox with flex-wrap nor CSS Grid with grid-auto-flow: dense are working as expected. ...
No description

My CSS don't run properly?

as you can see my css path here is good but when i run it in my browser my website doesn't have any css beside bootstraps is there a problem in my pathing or is it somewhere else?...
No description

Grid layout system for 1300px

Hello, I have to create a design system based on a mockup that follows a grid. Designers provide a mockup for the widest desktop format at 1440 pixels (container 1300px 12 columns), and a mobile. For the example i talk about the desktop grid. Currently, I'm using the same structure but without a grid system, based on flexbox. To adhere to the mockup, I take a block with a fixed pixel value, then set the others as auto flex (depending on the section, of course). ...
No description

Am in dire need of help

@Kevin Powell or any moderator out there, I need help in how to charge for an auto mechanic service shop, where to get a good template, where to register for a domain name, hosting, etc. this is my first gig need to get this bag been 4.5 months unemployed HELP PLEASE!!!πŸ™

Code splitting styling issues

Hey everyone, I have styling issues when doing code splitting with webpack. Im using Vue with CSS Modules for scoped styles. I have reusable component ButtonEl, which is in multiple css bundles, and this override Im doing is in first bundle, ,,,, however, later ButtonEl styles from another bundle override those specific styles, just based on being evaluated later. I know I can use some tricks to increase specificity, but I would rather solve this in a centralized manner, if possible....

bootstrap structure of layout#bootstrap

how is it mandatory to use container row column structure has like in bootstrap to make a responsive layout either we can do it in another way

Best practice for semantic/accessible side menu

I'm planning new functionality for a site and before I start, I want to get the HTML structure right in my mind first. But as I plan this out, I find that I'm not totally sure whether what I'm doing is indeed best practice use of semantic elements and aria attributes.
I've attached the basic wireframe and my intended code structure, with the rationale underneath. I'm first examining the structure of the final HTML, rather than the script needed to handle the interactions. I'm very open to different viewpoints and feedback πŸ™‚...
No description

rsuite datePicker minDate and maxDate not working

I want to set minDate and maxDate in rsuite. but its not working. Plz anyone help me fix it Code Sandbox Link: https://codesandbox.io/p/sandbox/relaxed-star-jwdd5d?file=%2Findex.js%3A11%2C35 code: import React from "react";...

Run function while async function is pending

I want to learn how can I run a function while part of my code is still running, like an async function or some loop that can take some time to finish. For example, while fetching data from an API, I want it to display a loading animation or message while the async function is pending...

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