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

Fixed position element causing issue on hover

https://www.veed.io/view/415c35b6-2139-4b4b-a0a5-3ac0852561e2?panel=share. I have attached a video above. The search element is positioned fixed 550px from top. then expanding of seachbar works fine when i dont scroll. but when i scroll and then hover it glitches. I switched to position absolute then that glitch affect goes away but i will not same fixed position relative to viewport. Here is the code: codepen: https://codepen.io/stressunfit/pen/gOZEmWp?editors=1100...

:root{font-size:1vw:}.my-title{font-size:7rem}

above is does the reponsive size of the font depending on the vw but the is the feasablity of this tried in one blog type web page lookgs exaclty from TABLET - LARGE DESKTOP...

Should I create a separate stylesheet just for responsive?

Which practice is better, making it responsive within the main style sheet, or creating another style sheet just for responsive, media query, etc.? I know that the more stylesheets I connect to my head, the more http requests will be made.

FCP, LCP in web vitals.

i made a website using svelte and tailwind css this div here is making my website quite not a good one ```html <div class="w-52 sm:w-64"> <img...

i want to know how i can make this design

every thing else i think i can pull off but the curves in the middle can someone explain how i can make that m not good with photoshop is there any other way
No description

How to make this heart icon

I have made heart icon using 2 circles and one div angled. But i cant make it just show border of heart shape and make inside of heart transparent. I want heart like this where it just shows outline of heart and inside it must be transparent. When click on it , it should turn red. Any kind of help i will be very thankful❀️.
No description

Are DOM modifications synchronous?

1. If I modify the DOM, can I be sure that that the next line of code has consistent access to that modification? 2. Same question, but for Tasks, microtasks, queues and schedules....

Any thoughts on a pure CSS solution color behind letters?

A deviously simple-looking challenge. Just a block of text with a background color. That only goes behind the text. πŸ™‚ Obviously not looking for a hard-coded clip path or something, but a general solution....
No description

Anyone knows how to achieve this design?

This table has empty <tbody>, but its height is fixed. Normally table has dynamic height, but in this image it doesn't. Tried using flex, but its just weird to use it for table. Codepen:...
No description

JS logic question

```js var x = 10; var y = 20; function abc(x, y) {...

Problem with hero image - positioning behind header

Hi, ya'll o/ So, I have this image and it's suppose to be kinda of out of screen and behind the landing page header. I have tried put position/z-index on the image and header put couldn't make it. When I try to put a z-index on the header, the maximum I got is the .header__cta above it, but the white header still behind u.u Can someone help me ? πŸ™‚ codepen -> https://codepen.io/rwxganta/pen/oNJmzZK...
No description

Flexbox 101: Setting height to box when using flex-direction

Trying to get the hang of how flexbox works on a more fundamental level. How come height is not being able to be manipulated when using columns (in div boxes without content)? https://codepen.io/spaghettibernie/pen/rNoPqjX Let's say you wanted to space up the div boxes to take more space, what would be an effective way to do that? "flex:1;" (flex-grow:1) does not seem to do anything here. Entering "test" into one of the div-boxes does extend it, but it limits itself to the content (block-type behavior). ...

How to set full width for items

Hello community, I am trying to set the gray background to be the size of the screen, but the width property doesn't seem to do that. Any links or ideas are welcome....
No description

How can I turn a React application into a PWA?

I am currently using a React application with Vite and I want to turn it into a PWA by implementing a customized popup for users to download the application. I have attempted a few solutions, but the service worker is not registering and I am only able to access the PWA on desktop and not mobile devices. I am using a vite-plugin-pwa and need assistance in resolving this issue. Can anyone help me sort this out?

FLEX WRAP IN MEDIA QUERY NOT WORKING

why isn't the header btn .a (github button) & toggle btn wrapping onto the next line???
No description

React Problem with Tailwind?

I just started using react 2 days ago. Im currently facing a problem with react to tailwind. The problem is when I'm using components as I design I don't see the results. But If I only design in the App.jsx I can see the output. Tailwind confi, App.jsx, components and output are attached. PS. This is a tutorial from a YouTube that Im just following....
No description

HOW TO MAKE HEADER CONTENT LINE UP WITH FLEXBOX COLUMNS

how do i make it so that the pic on the left and github button line up with the ending of the flex box columns?
No description