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

Grid auto-fit layout getting messed up around new column breakpoints

I'm trying to create a grid layout (Just for fun as after a question on reddit got me wondering if it's possible) The criteria I'm trying to achieve are:
1) The grid is always 'full', as in regardless of number of children the last row is always full.
2) The columns never exceed a specific width.
3) All happens automatically with no need for media or container queries. ...

Can anyone help me with this layout?

Hi, I want to achieve this kind of layout I already have. The problem is that AI made it and I didn't understand anything and I am also sure there is a better way to do it. In fact I can't even move the year margin bottom up or details around without moving the entire block of elements. You can create a code pen with a similar example if you want.
No description

Can anyone tell me how can I get this kind of background effect ?

Hi, this is the effect I'm talking about: https://www.meetup.com/ thanks for the help in advance....

Portable monitor home setup

Well, firs things first is actually getting that monitor. Having one on my mind and need to save up money for it. Once I get that monitor I would like to setup some sort of "homeserver" so my raspberry pi connected to my monitor can access my laptop. https://www.bol.com/nl/nl/p/arzopa-a1-game-portable-gaming-monitor-144hz-16-1-inch-met-cover/9300000176050179/?s2a=#productTitle...

Confused on how to approach this Layout

Hello. Hope you are having an amazing week. PROJECT EXPLANATION I was looking for website inspiration to learn new things and came across this site: https://www.wallofportfolios.in/portfolios/ayaneshu-bhardwaj/ and I wanted to give it a try but on a different setup. Instead of having it as a sidebar, my navbar will be on top....

Best CSS pattern for dynamic masthead + sticky sidebar + body scroll?

Hey everyone! 👋 I’m exploring a layout pattern and would love some sanity checks or alternative ideas. My requirements are:...

images not equal

original https://help.goabstract.com/hc/en-us clone https://abstractclone.netlify.app hi i took a challenge from frontend practice level 1 it went smoothly i even made an adjustment to the original site logo i learnt 2 things in this project : 1 - mastered responsive layout with rem and em units + mobile first approach which is new to me since i did only pc first . 2 - learnt how to clone and design svg icons with inkscape ...
No description

Strange behaviour: gradient and rotation

Hello ! I am looking for a way to apply a gradient to a set of elements that are tilted I have managed to create a progressive gradient on the icons (and not applied to each of them), but when a transformation is applied, the gradient disappears Here is a Codepen to better understand what I want to achieve. I would like the gradient to be applied to the icons and not to the background https://codepen.io/perr0112/pen/azdKjVY...

Help with CSS flexbox

Hi, these two elements are inside a navbar with a display of flex. What is the best way to bring the logo on the left and the search bar at the center? also considering responsiveness. Thanks in advance.
No description

Looking for guidance on a freelance project.

Hi! I don’t talk too much in the server however I’d love any advice on a personal project I’m more than halfway through, Currently I’m an aspiring junior developer not currently in a developer role. Roughly 3 months ago my driving instructor gave me a chance to create an app for him (fully paid) and it’s taken me around that time and 40+ hours to get to around the end of making it. I haven’t asked him about his budget and he hasn’t mentioned it either, Soon I’ll bring it up however I’m unsure how much to charge him for the app itself considering I’m doing front-end work, middle & back-end and even learning the languages while developing the app....

How to approach this type of layout

i have tried to make the button and the overflow people as the separate component and make them absolute, and for the other part i made it as background image....
No description

Google OAuth login into my app works on desktop but not on iPhone

I’ve just deployed a site on a VPS where I’ve come to an issue… I’ve set cookies upon login both access and refresh Now my front end is on netlify and my backend is another domain a free one I got from dpdns! Now for some reason an iPhone safari and Chrome the cookies aren’t being set, after lots of digging around I found the solution that disabling prevent cross site tracking on safari made it work and enabling crosssite tracking on chrome made it work in iPhone settings ...

dropdown that looks like a heading

I'm trying to create a dropdown that looks like a heading with an underline underneath it. The underline (bottom border) should dynamically adjust its width to match the currently selected text, not the longest option in the dropdown. Here is what I've tried: 1). Setting width: auto - select element still sizes to longest option 2.) Using useRef and useEffect to measure text width with a temporary span element and setting inline style - didn't work 3). JavaScript approach to calculate text width using canvas measureText. Here is my codesandbox: https://codesandbox.io/p/sandbox/smln2r...

KPow video on the responsive sidebar switcher

Hey does anyone remember or have bookmarked the KPow video where he had a couple pens (I think one with flex and one with grid) where he had a responsive layout that had a sidebar (which wrapped without media queries)? I belive there was a flex example that used a "hack" with flex-grow to find the breakpoint where it wraps and also a grid example to achieve the same thing. None of my search queries on YouTube or codepen are finding the video or pens im looking for....

Hey, quick question 👋

My navbar is fixed (z-50). Hero section has AOS animations. Animations work, but elements appear above navbar when scrolling . Tried relative, offsets, higher z-index… still happens. ...

I made the Arc Raiders button in CSS but I'm not satisfied.

Hi all, I have been looking forward for the release of Arc Raiders but last weekend I was able to play the Server slam and I knew beforehand I would enjoy the game but what I did not expect was for me to fall in love with their main button design (UI overhaul: https://x.com/ARCRaidersNews/status/1976409386173219084). I was able to recreate it using CSS only, but I'm missing one more thing for it to be just perfect....

Animated Sidebar using dialog-element

I wanted to use the HTML dialog-element with the showModal variant and it works as expected to slide in and out from the left but not from the right. What I'm doing wrong? https://codepen.io/markusrodler/pen/ZYQoMgz...

Tokenizing a design system and components with SCSS

Has anyone here "fully" tokenized a project? I am talking about tokenizing not only the main variables but also component variables. I am using SCSS and a complete tokenization seems like it's going to help me reuse much of my styling and also allow for customization in the future, but I do not have much experience with it so I don't know much about how to do naming and hierarchy, so I am here looking for resources.