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

how to wrap these in elements within 50px of height in css

so i want that icon and two p tags text inside 50px of height . in that icon place there will be a mui icons , icon fits perfect but the text going outside , i tried justify-content:unset; ```html <div id='ios-icon-div'> <div>...

Container query not working

Hello, my container query on .gridContainer is not working at all. If i change it to @media it works fine and dandy but the moment i try to use @container it just breaks and doesnt create me a 4 column layout on desktop as it should : ```css @use "sass:math";...

Create an Embeddable Widget with Remix and Vite

I'm looking to create an embeddable widget using remix.js and vite. Specifically, I want to build a script that can be embedded in other websites. Does anyone have resources or a basic example that could help me understand how to do this?

why is height: 100%; not working?

Hey, I have a flex container with an image and text. I'd like the image (it's in a div so the div) to take up the full height of the parent container however it doesn't seem to work? it only works with min-height. I don't understand why this is happening? It has the room to grow since the parent container is the height of the text. Unless in this case 100% means the content? Thanks in advance. https://codepen.io/deerCabin/pen/wvLZdEe...

relative-positioned element is cut off

I'm having a problem with position relative and absolute, the content of the header doesn't show properly. but it's cut Note: removing the position relative might fix the issue on the pen, but it makes the header scroll in my other code (the pen is a quick example)... So my solution can't be to remove the position relative Pen: https://codepen.io/n00bCod3r/pen/yLdrOeP...
No description

How to align top of picture with header title?

Hey everybody, I'm a beginner software dev and I'm currently working on a practice flexbox project, I wanted the top of my image to line up exactly with my header title "Heroes for Hire" and I can't think of a way to do this although I'm sure there is, anybody able to help? Here is a pen: https://codepen.io/Oothman/pen/MWMRwGB
No description

how to create protected routes in Nextjs 14 on client side

I am creating a next app. In there, i have login, home pages at all. I created one Authentication file for protecting pages Authentication code: https://controlc.com/75886140 and i wrapped this in _app.js...

Fonts will not load correctly

Hi everyone. I'm doing a "mockup" of parts of a website of a festival I attend every year. On my local server (via Live Server VS Code Extension) both the images and the fonts load correctly. However, on the github pages I only get "404 Not Found" for the fonts. I checked the "Network" tab in DevTools, and it shows that the request URL for some reason doesn't find the root folder when loading the fonts. It is missing the repo name from the URL. I've been trying for a while now, experimenting with how I reference the fonts in my _fonts.scss file, to no avail. Hope someone here can figure out the exact issue. Thanks!...

Detecting language via JavaScript (i18n) best practices

Hey all! I have a site that uses navigator.languages to redirect a certain route to a locale-specific route (English to /en, Spanish to /es, Spanish (Latin America) to /es-latam, etc) and am curious about best practices. Using the Sensors/Location tab in Chrome, I am able to change locale to test that it works properly. It seems to be fine in this perfect environment, where navigator.languages only returns a single locale. However, I sent it to a friend in Mexico, and it defaulted to English for him. It turns out his browser has navigator.languages set to ['en-US', 'en', 'es']....

Condition overlaps?

```if (randomNum >= 0 && randomNum <= 1 / 3) { compMove = 'Rock'; } else if (randomNum > 1 / 3 && randomNum <= 2 / 3) { compMove = 'Paper';...

Why does setting `min-width: fit-content` on grid item influences the width of the sibling?

In this pen, there is a title, description and horizontal images. If you view it in a screen that's between 1024 and 1660 pixels wide, you should observe that the horizontal images (ID "social-media-images") overflow their container, which is a grid. The width of the "social-media-images" should stay fixed at 1660 pixels as long as the screen width is like described above. At the same time, it's above sibling (the element that wraps the text) has the same width (1660 pixels). Now, if I set the min-width of this "social-media-images" element to fit-content, the "social-media-images" element still overflows its container (it still has a width of 1660 pixels). However, it's above sibling now becomes as wide as its container (which is the grid element). Can you explain what's going on here? Why does setting the min-width of a grid item influences the width of a sibling, while not influencing the width of the element that it is set on? Why was the text container initially as wide as the "social-media-images" elements but upon setting min-width on "social-media-images" elements, the text container now shrunk to fit the container?...

background positioned paragraph is above hamburger menu

I have an issue with my hamburger menu not covering up the paragraph that is positioned in the middle of the background image. Could some one please tell me what i'm doing wrong? Google hasn't helped ``` .paragraph { color: rgb(255, 255, 255); font-family: Zilla Slab;...
No description

Help fix animation flip timer

Hello everyone, I'm working on a project and I'm having trouble finding a solution. My project is to make an animation of flipping through a page of a book on a Timer (flip timer). To test my animation, I tested it on the seconds. The problem is that the animation isn't synchronized with the change of second, so it runs twice as fast....

Nth child not selecting.

I'm trying to select the first div and move it around with position absolute https://codepen.io/eforempanada/pen/WNqmRpP...

regulated css vs @layer and @scope

Hey, what's a major difference between using regulated css and @layer/@scope? With @layer, if you generally make sure values don't clash and add exceptions for cases where they might then @layer seems like extra work to me? The same with @scope, rather than saying "make all text from a to b orange", then you could wrap the contents of a to b in a utility class called "text-orange" or something, at least that's what i've commonly seen used. All in all they both seem like more work? I'd appreciate...

Question about Vuejs and disabled links

I'm currently doing an ADA assessment on a project that is failing on their disabled links because the html rendered is <a disabled="disable"> instead of <a disabled> As far as I can tell, this is how Vuejs renders it because even if I change the <a v-bind:disabled="disabledValue"> to just hard code the <a disabled> Vuejs still seems to change it to <a disabled="disable"> Does anyone know if this is just how Vuejs handles its boolean attributes and if so is there a way around it? I've never used Vuejs before so I'm assuming I'm just missing something....

Why aren't the margins collapsing?

Can anyone explain why the margin of each sibling MUI TextField components aren't collapsed? sandbox link - https://codesandbox.io/p/sandbox/c3kptp?file=%2Fsrc%2FApp.tsx%3A10%2C24 ...

Looking for a resource / tutorial on how to add interactive maps on website.

I am trying to add a section where if u click on a country, the map interacts, however with a simple png, i cant do much, where can i find svg or interactive maps for free to add it in my website? Something like in the image beside. Or maybe when I hover over a country name, the country should highlight.
No description