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

DoContra

11/14/2023

grid responsive

Hi, I would like to know if you can help me, I wanted to know what would be the best possible option to put this responsive display grid, the container is limited to 1280px and the card to a max-width: 270px.

Confused Horse

11/14/2023

Absolute positioned element exceeding (and affecting) scrollable container.

Hello everyone! I recently ran into this tricky situation in which I have an absolute positioned element which is inside of a relative positioned element, which again ist positioned in some other container which allows for vertical scrolling. (there's more to it, but this is a minimal reproducible example). However, the absolute positioned element supposed to be way bigger than the containing element, which cases the container in which they're both placed to be affected. I tried to reproduce the example in a codepen: https://codepen.io/ConfusedHorse/pen/MWLvMbN Because this is just a reduced example, the following properties must not be changed:...

swimmy jones

11/14/2023

Next 14 Session Provider

Does anybody know how to setup a session provider with Next JS 14? I just went through their tutorial, and it was cool, but there's no info on how to setup the session provider, and everything I try online seems to be out of date. I'm considering just switching to a more well documented version of next, but wanted to get the thoughts of you guys before resorting to that. Thanks....

CDL

11/14/2023

Another day of life, another CDL question on Svelte!

https://www.sveltelab.dev/7gkkb6hx4odofjj I'm trying to add some dynamic code to the Header.svelte so that when I click on a link, under the Navbar I'll add my title, see Codepen for example. https://codepen.io/pen/...

sas

11/14/2023

How to create infinite site?

How to create site like miro (infinite)? I mean, i need to create site that you can scroll and scroll in all directions (depending on amount of content, more content, more scrolling). I'm now trying to make this site with overflow: auto, but it works not how I want. Maybe there is some videos about this? More specifically, the result of what I did didn't suit me because I couldn't center the container properly. That is, I had a container main, and in it a container expenses, the container main I did not set the size, as well as the container expenses (but set the size of containers inside expenses), and when I tried to center the container expenses relative to the container main all centered, but the content on the edges of the container expenses became unavailable. And I also want to say that I don't need content generation when scrolling (at least for now), I need to be able to view the entire expenses container content in peace....

Ã̶̅n̴̊͑k̴̾͌s̵̒̐e̵͗̒l̴̿͋

11/14/2023

Border hover animation reversing

Hi, I'd like to reverse my animation when hovering off the element, and not that it disappears without transition like now. Also the animation is weird and glitchy, can't figure out why.. https://codepen.io/axl-prudhomme/pen/XWOayoN?editors=1100...

Kai Cerësy✨

11/14/2023

Border "padding"?

Hello everyone, with a div that has padding-inline, how do you typically styling to achieve a border like this image? I usually add border to pseudo-element like ::after or to a child div instead, just wondering if there is a better way......

Stephin Maju

11/14/2023

how I get this radius?

How I get this border radius

syg

11/13/2023

handling image heights using img/src/sizes with object-fit: cover to overflow width

I have images with object-fit: cover that I need to be full screen images, how can I optimize my images with img, srcset, and sizes when these work exclusively off widths? See the full screen slider here for my issue: https://2x4miniramps.netlify.app/ You'll see that when the image is landscape, it handles correctly (using width), but when the image is portrait it has no clue how to handle the height. ...

CDL

11/13/2023

Svelte routes +page/+layout and src/lib/components

I'm messing around with portfolio ideas and am trying to figure out how to get the damn navbar links to work, so far it's driven me mad for about an hour after googling, chatgpting, svelte docs etc.. https://www.sveltelab.dev/5lyuqf6riwp4az3 What am I after:...

dlongodev

11/13/2023

Issue with `display: column` with an absolute positioned element

I need help! I'm trying to avoid using Masonry.js library bc I have a simple page for testimonials that works perfectly with display: column but I'm encountering an issue with the quote icon I set up with absolute position. Those svgs are not perfectly aligned in the second and third column. I recreated the issue in CodePen: https://codepen.io/Daniele-Longo/pen/KKJvNoG. I could target the div that is in the top, but I was hoping for a more dynamic solution since my user may have to add or r...

CDL

11/13/2023

Looking for info on how to add animations to a page load in Sveltekit.

Open up a webpage and upon that initial load, the navbar transitions in 1 word at a time "home" then "about" then "contact" then "projects" or whatever. I've found several videos/guides on how to just do it when clicking between pages, but not on the initial page load itself :/

goky chan, plebku

11/13/2023

{% extends.. block body} is it standard to use or not?

Is it standard to use % extends, block body, end block like in the code below(copied from cs50 video) or is it better to just type out the whole template on each new page with exclamation mark in vs code? ```html (% extends "layout.html" %} ...

marvxkiyi

11/13/2023

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

CDL

11/13/2023

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

Lila

11/13/2023

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

unluqy

11/13/2023

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!

Igor Petrovic Design

11/13/2023

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

King

11/13/2023

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

Brandon

11/13/2023

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

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