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

#search has an overwritten color and i can't seem to pinpoint it.

I've placed my search input next to my ul list that turns into a hamburger icon when it is in dev tools for a mobile phone. problem is that it seems to be inheriting a style. I've thought it was the #menu__box background-color but it isn't removing that color when i remove it. when i remove all colors it isn't updating it. its only when i move it away from the hamburger menu in html that it update the #search color back to white instead of gray. Also using !important does nothing for the color either. could any one tell me what i'm doing wrong? Code pen is bellow with image screen shot to show what it looks like. https://codepen.io/Jwfrank3/pen/WNqBoWZ...
No description

horizontal scrollbar disappears when an element is a container and you zoom

Hey, i recently discovered that on one of my project sites. If i zoom in until around 500% and shrink the browser window, the horizontal scrollbar disappears to view the overflowing content due to the parent being a container. When i turn that off, it works as intended. The overflow is not a concern as i was told in another post i asked in that this is normal behavior at that zoom scale. I'd appreciate any help, thanks in advance. https://codepen.io/deerCabin/pen/xxoNZGg...

How to achieve BEM / CSS Module type scoping with @scope

I'm trying to wrap my head around how @scope works and specifically how to implement parent/child scoping like in BEM or CSS Modules, where you can write styles that apply to a component that won't bleed into any child components. I thought that's what to was for, but it seems like it doesn't always do what I'd hoped. This works as expected. "Outer Text" is red. "Inner Text" is black. ```...

Using nth-child() ibn calc()

I think I saw one of Kevins videos using nth-child in calc operations ( I havent been able to find it) but I`m not sure of the syntax. I have a list of articles with the same class specified via a custom property, and a calc based on the nth-of-child, but instead of hard coding for each article I want it more automated e.g. from article--stagger-delay>* {...

How do I use matchMedia in svelte?

I have a svelte component here. I plan on making the menu open up whenever I scroll to the top. However, I don't want this listener to work when the window is like.. x pixels or less. In vanilla JS, I would use window.matchMedia, and attach a listener to it, checking when it changes, toggling the menu and removing the listener. What would be the svelte-y way to do so?...

Prevent image from resizing while transitioning

I have several columns that expand to the whole row of them on click, each column contains an image, and the images keep the same size after expanding, so it would look like the clicked image moves horizontally and the other images disappear. The problem is, because of max-width: 100% on images that prevents overflow, the images will resize while transitioning since the column width will change. As a result, the height will change and make the layout shift. Is it possible to "lock" the width of the images while transitioning instead of letting it refers to the temporary column width?...

React Bug Fix

Hello. I enjoy coding in free time. While grasping a project I met a bug but didn't fix it yet. Chessmen don't move as I ordered. I hope skilled developer's help....

overflow when zooming in.

Hey, i was debugging a project of mine and noticed that if i zoom in to a high extent (i saw it at 500%. I'm aware this an unrealistic number and most users probably wouldn't do this) my content overflows. I'm using clamp for my font sizes so it's most likely because that caps the size the text can shrink to. Is this something to be concerned about or cater for or is it regular behavior that you can't do much about? Thanks in advance. https://codepen.io/deerCabin/pen/xxoNZGg...
No description

Round a box-shadow without round the parent

I don't know if it's possible but I know that if the parent container has rounded corners I can see the background behind it. Thank you. box-shadow: inset 0.5vw 0.5vw #991b1b, inset -0.5vw -0.5vw #991b1b, inset 1vw 1vw #f1f1f1, inset -1vw -1vw #f1f1f1;...

Can't make Fluid for Tailwind work

Hello guys I'm starting a new project using React+Vite+Typescript and Tailwind for styling. I bumped into Fluid for Tailwind (https://fluid.tw/#tailwind-merge) and I was pretty much curious to use but I really cant make it work. I keep having a warning: "warn - fluid-tailwind: Fluid extractor not found in your Tailwind config". here is my tailwind.config if can be any helpful: ...

stroke text

Hi guys, I want to create some text like the picture but when I use text-stroke the text is broken. Is there any way to fix it? ```css p{ font-family: "Inter", sans-serif; font-size: 70px;...
No description

Problem with transition display: none

Hi friends, does anyone know why this doesn't work? In reality it is working in only one direction. Any collaboration is appreciated, greetings!...

grid minmax | minimum size

Hey, i've seen, and use myself, the minimum for the minmax function being 16rem for responsive grids. This works great for a viewport size of 320px without overflow, but for devices smaller (i'm looking at minimum 280px), it overflows due to it being a fixed value, i'm surpised it's taken me this long to notice that haha. I've tried replacing it with minmax(min(100%, 16rem), 1fr) but that doesn't seem to work. Does anyone have a recommended solution? Thanks in advance. https://codepen.io/deerCabin/pen/eYwoaQL...

how to run a code on Chrome DEVTools

I have this very specific scenario on my job where I need to keep refreshing a certain page in my work so it can update new IDs. I thought about making a code that would refresh the page every 5 seconds and only stop when it finds a different ID from the ones already stored. The problem with this approach is: Every time I run a code, like location.reload(), obviously the page refreshs and both the data and code are lost. How would this be possible? I thought about using some external file to do that, like VBA libreoffice or even a notepad (we can't download anything), but idk how to do it. Can someone give me a light?...

Grid layout

Trying to achieve the layout with grid. I got stuck here. ```html <div class="images"> <img class="first" src="3.png" alt="" /> <img class="second" src="7.png" alt="" />...
No description

setInterval()

Steps to reproduce:title of the document should be changing as new messages every second. But it doesnt happen here ,only on the initial refresh after 1 sec the title changes and remains num
setInterval(() =>
document.title = '(2) New Messages', 1000)
setInterval(() =>
document.title = '(2) New Messages', 1000)
...

z-index for animation

hello there, seems to be easy but i cannot figure that out. i have hover effect on items little tooltip pops up, but when u hover higher element he's lost z-index https://codepen.io/melasculla/pen/ExBJORV...

Trending now part and movies list are not responsive. Please help.

For more details about my problem i am facing please visit netflix.com . I am making a netflix clone. The movie images occupies more width and a scrollbar appears in the bottom because of that. Also the trending section shifts down when width is reduced. I am uploading screenahot here cause i was unable to upload the file ....
No description

Where can i find custom html dropdowns, easy to use and customize

I've always found it hard to customize or find select dropdown menus for websites, I do not want to use bootstrap dropdowns. Any other suggestions are welcome