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

Jojoba

9/16/2024

Responsive layout - grid with image

Hi everyone, I was asked to create a layout of a table next to an image. There were a few constraints: * The table declare its width * The image aspect ratio is 16 / 9 * Table and image should be aligned (table should be scrollable if content does not fit)...

alejandropd

9/16/2024

Astro npm run dev does not work

Hi everyone, As the main subject says, when i first start a new Astro project, with the following installation options steps: 1- npm create astro@latest 2- Choose a directory name "example"...

محمد

9/16/2024

weird react problem

I just downloaded NodsJs and tried to write this code in VSC terminal and this showed to me ``` PS D:\New folder> npx create-react-app my-app npm error code ENOENT npm error syscall lstat...

snxxwyy

9/16/2024

flex component | weird padding behavior

Hey, i'm using a flex utility for a responsive two column layout. The layout should switch from single column to double column when the container reaches 45rem in width. When the container has padding on it though, it switches over a little later. I don't really understand the reasoning for this other than it's possibly adding the padding value onto the 45rem, but even if that's the case, if the container that doesn't have padding has reached 45rem and switched, then the padding shouldn't make a difference? Thanks in advance. https://codepen.io/deerCabin/pen/VwJOqYW...

vic

9/16/2024

need help with grid in responsive

codepen link : https://codepen.io/Vicky-clowdy/pen/jOjoQPY So the red circles will be replaced by images on my project but the problem is the images are displaying correctly in devtools responsive like that picture but when i use vs port forward and saw on mobile the first column is not displaying , it shows from 2nd column. i tried grid-auto-flow:row and still the first 2 elements not display properly...

DooMGuY086

9/16/2024

Sticky nav not working on mobile view

Inside of a div, I have header component and a nav component which I wish to make sticky but it is not working

sebin

9/16/2024

Hosting React Laravel Project

Hey guys just wanted to ask for suggestions. Im planning to deploy my project of Laravel React. As of now I'm nearly to 100% completing the frontend which is react and just wondering if you guys can help me where to deploy this? (For sharing purposes using URL) I did try on GitHub and Vercel and runs some problem. Is there any deploy drag and drop site you can recommend? Folder structure is the main img...

snxxwyy

9/15/2024

how to make sidebar scroll-able.

hey, this is something i've been stumped on for a while. How would i make the sidebar on the left scrollable on the vertical axis, but not the "page" or content on the right? So the content on the right sticks whilst you're able to scroll through the would be nav. I'd appreciate any insight, thanks in advance. https://codepen.io/deerCabin/pen/QWXRage...

snxxwyy

9/15/2024

:is vs :where

hey, what are some example use cases where :is and :where do separate jobs? from what i've seen they mostly do the same thing? and the mdn docs give the exact same code in the examples for both of these? an example of this is ```css :is(h1) { color: red; }...

Eso

9/15/2024

Should i use @container instead of @media?

Hi, if do not care about browser support should i completely discard @media usage ?

bfmv

9/15/2024

how to avoid page from reloading when clicking on urls

can u all send me a tutorial

Tok124 (CSS Nerd)

9/15/2024

calc-size(auto) not working when parent element has display:flex;

Hi, i know calc-size(auto) is an experimental feature so maybe that's why. but i have realized that you cannot animate height:0; > height:calc-size(auto); if parent element had display:flex; probably wont work with grid either. I'm just wondering why, is it just because it's an experimental feature? Or is it a bug? Or is there any solution to this? Video that shows the issue:...

Raskin

9/15/2024

#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...

snxxwyy

9/14/2024

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...

dimal

9/14/2024

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. ```...

londonpete_harrison

9/14/2024

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>* {...

Lofty!

9/14/2024

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?...

露米諾斯 Lumynous

9/14/2024

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?...

9/14/2024

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....

snxxwyy

9/14/2024

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...

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 🙂.