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

help

How to remove the blank space in the component

So I have a toaster component that aligns toasts at the top. When the first toast uses more width than the second one, a blank space is appearing. How do I remove that extra blank space? Here is the toaster html ``` <div class="toaster position-fixed top-0 end-0 px-3 py-2"...

Responsive positioning in css

Hello, hope you all are doing good now can someone explain to me how do I position my logos (Netflix, Shopify, Spotify, Walmart). exactly like in the design, please include your HTML too. code: https://jsfiddle.net/speedy2k/n28p56ua/6/...

Help me achieve this Effect

Source code and how to video is included. I create sites using WordPress and Bricks builder. Can you help me create this effect on Bricks builder? thanks https://codepen.io/Hyperplexed/pen/MWQeYLW...

Adding eventlisteners iteratively not working.

I have an array that I'm trying to iterate through to add to a list. Everything but the eventlistener works fine. `let suggestion; for (let i = 0; i < cities.length; i++) { suggestion = document.createElement('li');...

Thoughts on teaching logical properties to new students of web dev

I teach high school computing studies (~15 year olds) and we do a unit on web development, where of course I want students to fall madly, deeply in love with CSS 😉. I'm wondering what people's thoughts are on teaching logical properties instead of directional ones. I really like margin-inline and margin-block for example (and they are nice shortcuts in themselves!) but some, like border-end-start-radius I can see being more problematic for first-timers. It's not like we'll be creating real-worl...

Building a replica page but have issues with positioning and nesting of elements

I've attached the image I 'm trying to replicate, and here is my current progress: https://codepen.io/Laing91/pen/GRwyaMq 1) Is it going to be easier to include Announcements and Trending inside the grid container? 2) An issue I come across with my live version (codepen doesn't show this), is that the side navbar doesn't meet the end of the page, or it does if I increase the width of that nav to 30% or higher, but at 20% or less it seems to have a large amount of invisible left-padding. https://callum-laing.github.io/admin-dashboard/...

How get element by data-attribute in javasript?

I have this data-attribute How better interact with this element console.log(document.querySelector("dropdown[aria-current]")) returns null...

can someone help me with how to set responsive wallpaper to match the current window size?

Good afternoon everyone, I was just needing help with setting wallpaper to change size according to the size of the window #html-and-css...

Can we use box-shadow to create stretched shadow?

Is it possible to create a stretched shadow for any element in html using box-shadow like in shared image.

Function not printing in the console

Why this function not printing in the console and not showing any error?

How big should the image sizes be?

I've been working on a site and I wanted to check how fast is my site loading with DevTool's Network option and it got nearly 40 seconds, so I've done some optimizations and it takes like 4 seconds for fast 3G now, which is still slow I guess, so I would like to ask how much KB is convenient for an image? The image in the photo is 134 KB. Is it too much or should I look for other options to speed up my site? Image's original size is 491x600.

Question regarding responsiveness

Hello! hope everyone is doing okay, so my question is when we are designing a webpage MOBILE FIRST, can we use MAX-WIDTH for changing/limiting the size of titles, headings etc or should we just change our titles, headings, during breakpoints (mediaqueries).

vue state management

I have response that come from my backend server is return details and id and I want to send this id from route to other route without navigate its like add specific item to favorites route it slould use vue state mangment...

Struggling with UI DESIGN

Guys i've created this login page +sign up page but i'm struggling to stylize it, any better color for background-color, fonts-color thanks that would help me so much

How do I customize bootstrap‘s $form-validation-state?

I ve been trying to solve this for hours and I cant find the solution. All I want is to add the property ‚background-color: black‘ to the invalid state. Here is the doc. Scroll down to sass. https://getbootstrap.com/docs/5.3/forms/validation/#browser-defaults, This is the appraoch if you want to change the $theme-color or $spacer, but it doesnt work on $custom-validation-states and the doc doesn't say exactly how to do it....

How do you prioritize what to build first when building a page/app?

I'm starting the admin dashboard challenge on The Odin Project (https://www.theodinproject.com/lessons/node-path-intermediate-html-and-css-admin-dashboard) and I'm curious what devs more senior than myself (literally anyone) would prioritize when building. I look at the design file they provide on the link above and I think, ok, I need to figure out how to build the overall layout here, so a blank page, with the left navbar first, then I need to add the header bar, then I need to add the project, then the announcements & trending. It still looks quite daunting when broken down, because I know as soon as I start, it's going to be an almighty battle making sure everything A) fits how I want it and B) doesn't mess up how other elements fit onto the page....

Need help with my slots machine

Hello, I have created a slots machine using html (pug), scss and JavaScript. It works fine but i want to make it so when each wheel stops spinning, i want them to stop inline with the gray center line that i have created. Im not really sure how i would do this. I would appreciate it if anyone can give me some help with this Here is my code https://codepen.io/tok124/pen/dyQVPzb...

Trouble targeting classes on mobile

I'm trying to use this media query to add extra padding on the bottom for mobile. @media (max-width: 769px) { .two-col-section_grid .two-col-section_grid-desc.mobile {...

Dynamic Grid Columns

I created a grid layout. Can I make the .container dynamically use the remaining space? Here is my jsfiddle: https://jsfiddle.net/withLume/wqb674u9/2/...