KPC

Kevin Powell - Community

A friendly place for developers to meet other devs, ask questions, get help, and just have a good time 🙂.

Join

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

Jono Lewarne

5/22/2024

Is there a neat way to achieve this interactive grid setup?

I'm developing a site for a company, designed by their in house designer. They want their team grid to work like in the screenshots. So a basic grid with all members, then by clicking on a person's profile it expands to cover the grid, obscuring the other members. Is there a simple way to do this or is it only going to be possible with fiddly js? I suggested using gsap flip and having the selected team member take up two columns and two rows but the bios are all so long and they don't want to tr...

Cjay Solly

5/22/2024

n00b center grid question.

I am fresh out of bootcamp at the end of March and working on my own porfolio page, got this card section for work experience right layout and size i want but for life of me can not getting it centered without doing a bunch of hacky margin and padding tricks making the responsiveness damn near impossible.. anybody willing to help a n00b out?

WebDevXpert

5/22/2024

Create Hacker Website Login Page in html

Like Share and Subscribe My You Tube Channel : @WebDevXpert Create Hacker Website Login Page in html and CSS #ytshorts #hacker #viral #trending #loginform: https://youtube.com/shorts/x9hjoFx0Too...

Å Marlon G

5/22/2024

... center div 😡

This feels like newbie shit, but I don't understand why my H1 is not centering within row 2 and column 2? I've done all the place-items/content/self, justify, align, text-align on both the Header and the H1. Nothing is happening. Repo https://github.com/AMarlonG/Rondo-prototype/blob/main/index.html...

Host

5/22/2024

Intrinsic style, or least specificity

This might be a silly question, but I want to create a custom component from scratch (an input element for forms that uses Javascript), and I'm wondering how to give it some initial dimensions (and other styles) in a way that can be easily overridden. There doesn't seem to be a way to apply styles with a minimum specificity, kind of like user agent styles, or is there? For example, the textarea in my browser (Safari) has a size of 155px by 26px which seems to be its intrinsic size (https://developer.mozilla.org/en-US/docs/Glossary/Intrinsic_Size) as there isn't even a UA style setting that size that I can see in the web inspector. I would like to be able to set such an intrinsic size (and other styles) on an element so that it doesn't have either a size of zero (or just too tiny) or fills the whole screen/container -- like the textarea. And without the user/me later having to know/overpower some arbitrary specificity, a sort of !unimportant if you will. Am I making much sense here?...

Disco

5/22/2024

<a> wrapping an image extends below the image

I'm obviously not understanding something fundamental here, but the anchor tag that wraps each image in the following grid is adding height to each containing div: https://codepen.io/adamantonio/pen/PovNLYE?editors=1100 This means that the scale effect on hover pushes the image out of the grid at the bottom only. I can see in the dev tools that the <a> is positioned towards the bottom of each <div> and has a "height" that extends below the image by a few pixels (see attachment). ...

Daniella

5/21/2024

Do all Hamburger menus need Js?

I’m curious , do all hamburgers need to have JavaScript or is it possible to use only Css + html ? Is it better/ more practical to use Js rather than only Css?

Haruto

5/21/2024

Making a cool loading screen

help me make my site have a loading screen that says < Loading > and after 4 secs the Loading text disappears and the < > come close together and do a 180 deg turn and open like door handles

iurychiga

5/21/2024

centralize with margin: auto

why i can't put something in the middle of a parent with margin: auto, but i can put it in them width middle with margin: 0 auto ?

mota77

5/21/2024

Using grid and on mobile overflows content

Hi there, I hope you fine. I had a problem with CSS grid As seen on image the mobile view have a overflow the css for the grid:...

kingtigerknight

5/21/2024

[Solved] The "transition" doesn't work

I just started to work with Vue with SCSS for the first time and I noticed that when I tryed transition like the code below, when I hover over my a elements, they don't have that transition time. I try to do it with normal CSS but that didn't work too but it worked with HTML. So maybe it has to do with Vue? Anyone know how to fix this? ```scss nav { border-bottom: 1px solid $c-gold;...

sagor_mohammed_yousuf

5/21/2024

Why mobile devices get unwanted horizontal scroll and whitespace ?

have any solution without overflow-x: hidden ? overflow-x : hidden good or bad ?

Ruta

5/21/2024

Center flex child on the page, while ignoring other children

The fiddle below explains it best, but basically I have a two-child flexbox and would like to center the entire container horizontally based on the second child ONLY. Position of the first child should be directly to the left. Is this possible? Should I use something other than flexbox? I can get close with absolute positioning but the first child moves too far/close to the second. Fiddle - https://jsfiddle.net/cms07dL3/1/...

SureshPasham

5/20/2024

When I integrate the redux store into my React app, then I get this error.

Uncaught runtime errors: × ERROR Cannot access 'WEBPACK_DEFAULT_EXPORT' before initialization ReferenceError: Cannot access 'WEBPACK_DEFAULT_EXPORT' before initialization...

vince

5/20/2024

How would you start this tricky section?

Hey guys been asking for a lot of help lately 😅 I am not as good at css as I thought haha I have the following hero (see images for desktop and phone mockups). I don't want a solution, I just want to know what's the best way to approach this to make it responsive / skeleton snippet....

HaiderWaseem

5/20/2024

Using createElement() outside the function

I'm trying to make a simple ToDo List. The problem I'm currently facing is that when I create the task span outside the function, and the function is called, the value of my input box is given to the span using innnerHTML, and it works fine, but when I click on 'Add Task' button again, it replaces the previous task and gets appended. However if I create the task span inside the function,(so that it is created every time the function is called),it works perfectly fine and gets added next to the previous task. Link to my JSFiddle: https://jsfiddle.net/5mqay9su/1/...

pastilhas

5/20/2024

css pseudo element ::before

Hello, you masters of the CSS. I have reviewed the videos from Kevin on pseudo elements to try and see if he mentioned what i'm looking for. Would love your input on this: Right now, the element, when "selected" is getting a "selected" class that adds that background to it....

Henry

5/20/2024

Understanding the behavior of a container's margins and paddings when parent height is set to 100%

I'll appreciate your insights on what's going on under the hood, and any advice to improve the CSS. Anything helps ❤️ 👋 Hi folks, in the link provided below you'll find a basic responsive layout, with a fixed header and footer, and a flex container of boxes. https://codepen.io/henrytuxdev/pen/BaeKKGr...

WebDevXpert

5/20/2024

Danger Alert ! || Make a Virus Prank 😁😂😁 || 100% Works #viral #trending #virus

https://youtu.be/34ajpBxK8DI

siuuu

5/20/2024

.this() and .catch()

fetch("https://pokeapi.co/api/v2/pokemon/pikachu");// to fetch third party API's .then((data)=>console.log(data)); .catch((error)=>console.error(error)); so in vs code .then() or .catch() methods says . is unexpected token...

Previous Next

Gaming

Programming

Kevin Powell - Community

A friendly place for developers to meet other devs, ask questions, get help, and just have a good time 🙂.

Kevin Powell - Community

A friendly place for developers to meet other devs, ask questions, get help, and just have a good time 🙂.