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 can I make a sticky, pill-shaped button that expands on click to show more navigation links?

Found Nav while searching for inspiration and thought to attempt to recreate it. Turned out to be more complicated than I thought. Is there someone on here that knows how to achieve this? This is how far I got 😓 https://codesandbox.io/s/dynamic-button-tmft35?file=/src/styles.scss This is where I found the sticky button: https://studiorotate.com...

Positioning and resizing SVG's?

https://codepen.io/pen/ My goal here is to have this be much larger, and act as a background image, something I'm messing with to see if I like it. I thought I could just set a width/height to style the svg but apparently it's not that simple. Ideally I Want this in the middle of the screen, blurred in the background, so I can add content over the top....
No description

When I load the website the hamburger menu is open and closes immediately

Hey. I am following Kevin's Responsive navbar tutorial using HTML CSS & JS. Everything works except when I add transition: transform 350ms ease-in to .primary-navigation when I load the website at width below 800px/resize it below 800px of width, the hamburger menu is open and it immediately closes: https://zakazkolcow.pl/ What am I missing? The code of the header is here: https://codepen.io/Iga-the-sasster/pen/poGryBY...
No description

Running into an issue when viewport reaches a certain threshold

Ive been doing the CRL course and I'm trying a challenge but when the viewport gets below a certain width everything just goes towards the left and I'm left with whitespace on the right, the more smaller the viewport gets the more to the left everything goes, if that makes sense. I can't remember what the solution to this was but I'd appreciate any help!
No description

Should I use the same HTML elements / sections for different breakpoints?

I guess the answer is that it depends, but still hope for some general guides on this. So, say I have a nav element which looks and works significantly different at Desktop and Mobile view (i.e. horizontal nav in Desktop and inside hamburger menu in mobile) Do you use the very same nav element but re-stylize it in CSS using media queries, or you just have a different nav with different style and use queries to toggle visibility of these two? Thanks!...

Dropdown won't go back when it slides down

I've cloned Kevin's responsive css navbar and added a dropdown feature, now i'm having trouble trying to get the dropdown list to slide back up when i scroll away from the parent element. Please assist! Here is my code in CodePen. https://codepen.io/highkeysaiyan/pen/YzBQbQG...
No description

Complex responsive layout

How should I structure this layout? In the desktop version, there are 3 sections within the right sidebar, separated by equal gaps, but in the mobile version, there is just one grid....
No description

Me again - Sveltekit, where to store css when using routes

I currently have my page setup like so. From what I understand in the svelte tutorial, +layout.svelte is where I want to store anything global? would this also include global css, or should I still be storing that elsewhere, like my lib/styles/globla.css folder. At the moment all I have in my +layout.svelte is an import from global.css, and my navbar. Should I be moving my navbar into a Header.svelte file, or is it perfectly fine here?...
No description

Button disabled unless the checkbox is clicked, how do you also disable hover?

Is it possible to add conditionals to css elements in vanilla, or is that something sass/scss picks up? I'd like button:hover to also be disabled unless yes = true, that's it lol. ```js <script> let yes = false;...

Change close icon color in bootstrap

i want to change the color of my close icon to white so that it matches the color of the navbar elements i have used a class navbar-close-white it is changing the color but it is not same as the other navbar elements also can i increase it's weight.here is my code"https://codepen.io/Talha-Mustafa/pen/XWOgzGe
No description

Overflowing contents? Or Something else

Hi , i am trying to make it responsive but going down through the breakpoints am having an issue as all the contents is overflowing, i don't know what causing this. I've marked in blue lines the in right is the issue.(Using tailwindcss too)
No description

React Race Animation

My code runs an animation of a track. I want to some how overlap the img of finish line which is just a transparent checkered finish line over the track near the end so it looks like the finish line is animating in with it. I can't figure it out. For context I am trying to make something like [1]: https://www.online-stopwatch.com/car-racing-timer/?countdown=00:00:07...

Adjusting iframe size for mobile responsiveness in Tailwind CSS

I am currently working on a project where I have a grid layout containing an iframe with audio content. I'm using Tailwind CSS for styling, and I'm facing an issue with making the iframe fit the mobile responsive screen. The first picture is my website and the second picture is how I want my plug in for apple music to fit. The issue is that the iframe doesn't adjust properly for mobile screens. I've tried adjusting the width, height, maxWidth, and maxHeight properties, but I'm not achieving the desired responsiveness. If anyone can help with this that'll be lovely! ...
royce portfolio

Locate element render delay in LCP

Hello, I am new in creating websites, and launched PageInsights after finishing a project and the performance isn't very good on mobile devies. Also it sometimes show 91 performance, sometimes 67 and now it's stable 79. How can I improve the LCP and FCP? I was spectating Coverage, Network and Performance tabs, but I don't know what's causing the render delay. I tried doing critical CSS, Image CDN, compressing the images size (the hero background is 37.69 KB in full size so it shouldn't take too much to download it), adding the lazy loading, but nothing seems to be working. PageInsights shows that hero section is loading for about 5s, but I don't really know why. Thanks for response. EDIT. I was thinking about downloading the material icons and montserrat font from Google, but I couldn't find anything about improving the performance or whether I would host fonts locally is better than importing them directly from Google Fonts github: https://github.com/Jakub-Gryczka/pomoc_drogowa...

Help with footer layout

Ok so I watched Kevin's video about alternative to wrapper and decided to refactor my project using that method but now I have a problem doing the layout of the footer that's full-width and because of that is itself a grid container with those grid columns style and I originally had it as a flex container that wrapped. To make it grid I need to define new columns but I can't since they're already defined and if I overwrite it it breaks and I'm not sure how to do it safely. The result should be like in the picture, if code is needed just ask me. (Note that the project of the footer in the image is not done with the grid layout of Kevin's video)...
No description

problem of height of div take heigh independent to his content

i have container with grid display and row and colm change depend on data getted and i map list of card product to show all is ok but card product have 2 div first box contain the iage and the second box have 100px height fixed my problem when i have slow server i see secondtbox render first and th rest not show after th image was loaded how to make the first box take the rest of heigh of card without wainting loading picture i try heigh 100% and minheight calc(100%-100px) but not work...

Help with an animation in tailwind.

The first website ectogasm is inspiration . I have been trying to do that navbar animation on my website with tailwind . Help regarding this would be much appreciated. I am providing the code below.

Get the image under the text

Hi guys, i want my image under the text on smaller devices. Now the image dissapears when i make the screen smaller. Whats going wrong or can i do better https://codepen.io/Boeroe/pen/wvNdKQM...

Autocomplete Input Bar

How to make this in MERN stack ? Does this use Google API ( which I don't want cause it ask for billing after certain months ). Or is there any other alternative present...
No description

Adding several different custom woff to css

What would be the code to add 5 different custom web fonts in CSS? I have spent all day trying to figure out how to add different custom fonts to the code. Nothing seems to work....