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

Contain and scrollports

```html <div class="scrollport container"> I'm just a scrolling container. <div class="fixed-position">I'm completely off the page and do not contribute to the scrollable size of my parent. My margin doesn't do anything.</div> </div>...

Admin Dashboard Template

Maybe someone knows how to get this Majestic template like this?
No description

default browser margins

Hey, is it recommended to utilise the margin that is on elements such as headings and paragraphs by default? I ask this because regarding resets, I see some use the wildcard selector to remove margin/padding from every element, and others not touch the margins at all. Iā€™m a bit confused on the reasoning behind this so id appreciate any insight, thanks in advance.

intersecting borders

How can I prevent div borders from being accumlated on top of each other like here https://codepen.io/sos909/pen/GRLPyzy The border between the 2 divs is wider than all the other sides, how can I make it consistent...

Scroll Animation with Dynamic Image change want to be more reactive

Hi there, I'm new but I'm needing some help with my scroll animating. For the most part, what I have created is exactly what I want, but there is an issue when I scroll the elements play out like a movie and finish the sequence on their own, and are not necessarily THAT reactive to my scrolling. Are there some JavaScript techniques that would help my elements react a little more sensitively to my scrolling? Another thing that would be a big help is to not have my elements all crash into each ot...

Git repo 'rebasing' message in terminal: "Please enter the commit message for your changes"

I've been trying to push to a remote repo, and I'm being hit with this message in the terminal (see picture) I want to get to point of completing the git rebase --continue so that I can finally push, but with the message I attached in the picture, in terminal, I'm not sure what it is I'm meant to do here? It takes away my terminal prompt and seems to just display information, asking me to Please enter the commit message for your changes. Lines starting at '#' will be ignored, and an empty message aborts the commit...
No description

How to remove whitespace when zoomed near scroll bar

Im using tailwind, when i zoom near the scrollbar there is small whitespace next to it, how do i remove/style it?? ```css ::-webkit-scrollbar {...
No description

Video with source webm not looping in safari

I'm having a video tag used as background video, which is working great in all browsers ā€“ except safari. In Safari, it is also playing but not looping. It just stops and stays on the last frame of the video. Strangely, when I remove the webm source tag and therefore show the .mp4, the video is looping. But with the webm included ā€“ which I really want regarding file sizes ā€“ its not....

Using React Query with SSR Next js 14 App Router

Hello. I would like to know if it is possible to use React Query in Next js 14 App Router in Server Components. Is it advisable to do so? I have seen articles and videos, I know that it is possible to configure it, but is it possible to use it in Server Components without messing up the SSR? Is there another more recommended option? Thank you

Achieving Consistent Blur Effects Across Different Browsers: A Guide

Could someone please advise me on why the blur effect doesn't appear consistent across all browsers like Chrome, Firefox, and Safari? In Chrome, the blur effect doesn't display correctly, while in Firefox, it appears exactly as desired. However, in Safari, the blur effect seems to have a slight yellowish tint. Why does this occur, and how can I ensure consistency across all browsers? Codepen link: https://codepen.io/Amit-Soni-the-vuer/pen/GRLPjax...
chrome browser

get Text and link (if exists) when users highlight text on screen.

Hi guys, I wonder that how can I get text and the link when users highlight it on screen? I got the text by this func but do not know how to get the link. Can anyone help me? ```js function getSelectionText() { var text = ""; if (window.getSelection) {...
No description

Need help with the Tab active state

so i have this 4 sections with the tab on the top of it. what i want to do is i want tomake the tabs dynamic they should be moving from Overviews to Class dates the tab's active state should also move dynamically i am using react and typescript and couldn't figure it out reference of how i want it to work - https://relevel.com/test/business-development...
No description

Grid-template-columns: auto-fit... but what of grid-template-rows?

In this example, I happily used grid-template-columns: repeat(auto-fit, etc); these buttons are actually ul>li > buttons. I did discover when tabbing through that the button was being focused on within the li so different sizes etc. (if you tab through the codepen when it opens youll see what i mean) I know this could be easily solved taking off the button:focus outline and instead moving it to the li with li:focus-within. However, i am curious about how to solve this in the use case where i have : --parent grid set to grid-template-columns: repeat(auto-fit) --button set to absolute, inset: 0, with li as position: relative; ...

angular project problem

I have two component hero section and nav-bar component.i want to set a comman background for both of them.does anyone have idea how i can achieve this.. I tried adding both component in a parent div in app component and setting background image to parent div. And also setting background as transparent for both component. But it doesnt seems to work. Any idea how i can solve this problem....

Sticky Navbar not working

I'm having trouble with my Navigation Bar. I want to make it sticky with CSS but it doesn't seem to be working. It stays at the top of the page even though I added nav { position:sticky and top:0; } Ignore the 0px, I actually changed that to 0
No description

Nav menu items not tking full hight of parent container.

I am making a navbar and i am facing this issue in dropdown, when i hover over the link then sub menu is not falling below header,i believe this is because the nav items are not taking full height of parent container,and i dont want to use absolute value. i have attached images for reference.and also code pen link for code reference. https://codepen.io/deepaka34196835/pen/OJGaeOR...
No description

Position grid behind other items

Hey, so this might be a little more difficult, that is why I came here to ask this, because I have no clue how I would achieve it properly. Following demo: https://jsfiddle.net/3d15u4hp/35/ As you can see, I have a container which is a grid and is set to make twelve columns....
No description

Increasing size of images in <p> without pushing text.

For context, I'm making a card maker website that translates text into icons and export them out as pngs. Problem is some icons have different sizes and decoration. For example the Divine Skill Icon has a X type of decoration making the icon tall but it's actually really small So I want to increase the size of some icons. However when the image heigh is now taller than the line-height of the paragraph it pushes the text up which is not wanted....
No description

Tailwind is not working on reactapp

hii guys can someone pls tell me whats the problem here Tailwind is showing this error and does not effecting my app warn - No utility classes were detected in your source files. If this is unexpected, double-check the content option in your Tailwind CSS configuration. my project github repo - https://github.com/om453/Cashify-Transaction-WebApp/tree/master/frontend...
No description