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

Web Relationship Sketch.

Hello Can I ask what is Website Relationship Sketch? I am only familiar with Website sketch which is the wireframe.

How to create a layout where parent height = height of smallest child?

I have a div with display flex which contains 2 children side by side, I want the children to be of same height but the one which is larger should be scrollable. In this sandbox example I want the blue to be the same height as red but should be scrollable. This is just a basic example the real case why I need is because on the left I have a form and on the right I have a list of products and then the list is much larger to avoid scrolling the whole page I want to scroll just the element https://codesandbox.io/s/immutable-pine-bzio8k?file=/index.html...

Optional Grid Column Track

Is there a way to have a grid column only included if there's room? https://codepen.io/ascentcreative/pen/XWPXmoQ I have a main content div and sidebar - basic example......

height 100vh problem on page load

Hey there. I have encountered a problem with height 100vh (svh etc.) On mobile device. (I have no idea why on an old phone it works how it supposed to). After I hit enter when entering IP address it looks like that and when I move screen it fixes everything...

Upper part of project disappearing(getting eaten up?) when resizing it vertically in Responsive mode

Project link: https://benevolent-seahorse-6c9816.netlify.app/ When you resize it vertically in responsive mode, while it is in "centered in the middle of the screen" state (desktop version), top part gets eaten up, instead of stopping at the top and enabling scrollbar. Most likely something to do with...

Precise alignment

Good evening! Annoying alignment question ... Why isn't my .title hugging the lime border like the .black-box is doing? Sat with this for an hour now. Pulling mye hair!...

Make an image fit a carousel

On this page, the desktop version, some photos don't fit this gallery correctly: https://www.ohvaz.ro/produse/pachetul-de-5-arome-ohvaz/ On mobile I'm happy with it. How can I change it so the photo takes up the entire height? Like it's zoomed in or something like that.

Design and structure of page

I never did a page before from start to finish and Im basically only going by Kevins videos so far. Im I right to assume that if I have got a decent structure with different sections (not sure what the right word for it is but red borders.) it's possible to make a good looking design? https://i.imgur.com/qXww8CP.png...

What is wrong with this function?

It should loop over the elements, and add the class active when hovering (and it should remain active until I hover on another hoverable). https://codepen.io/myntsu/pen/JjaYJed...

Getting images/icons for your site.

For the fonts I've found out that you import from eg. google font. Is there something similar where you can get standard images/Icons, I.e. settings cog, small person etc....

3d flip text Animation

I want to create text flip animation like in this website: https://scale.com/ I want this should be https://codepen.io/mozi47/pen/MWqapOY So far I achieved somehow this animation....

Beginner question

I have page built with templates. It seems my style.css is working on some parts and not others. Is there any common rookie mistake that could cause this?

What files can or should not be put into GitHub when you build your app?

Hello, since this is going to be my first time putting something into GitHub when building something with React to share to others... what files do I put? When I was only using html, css, and javascript it was very easy as I just put everything into the folder and BAM, it's in gitHub and working fine. Now that I'm using React, theres a node_modules, public, src, and build folders. There is also a package-lock, and package json files. There is so much other folders and files that I don't know which of theses of should I put into a folder so that publish into GitHub like, do I just put everything from the folder into github or do I only put the build folder? I'm kind of confused about that. Thanks in advance 🙂...

Help center the container without it breaking!

Project: https://benevolent-seahorse-6c9816.netlify.app/ If I do it the regular way with either display:flex or position:absolute with that weird transform centering way, it breaks, due to container having Grid I guess? Help centering it without that happening, while it still retaining responsiveness?...

track element in real time

can anyone tell me, if i have an element in my webpage that's moving how can i always keep an update of it's coordinates in real time basically js will always be looking for the coordinate of that element regardless of it moving or being stationary...

How do I get the audio to stop after x number of time

how do i get the the audio to stop after a 7 sec

ideas for tech with my project

I'm slowly coming up with ideas for the layout of the radio site redesign. What id like to do is make it extremely easy for them to update the content daily. Based ok how people are with tech in my area, the easier the better. I was thinking of building a tool that can convert something like a word doc of their daily updates that can parse the document, convert it to markdown then pass it to the website for a final review before publishing. I was thinking of using python to handle all that then letting svelte and the markdownx converting the markdown into html for the site. The issue im running into is the company being able to run python for it. After the design and site is built I want to purpose that and the tool with it. Any thoughts on handling the simplification with handling python? I'm thinking maybe an executable could work....

Inset and pseudo elements

Hi! Is there a way of setting the red stripe to be glued to the left side of the .content container (inset-inline-start)? I thought that the pseudo element, when container is position: relative; and pseudo element is position: absolute, would use the container as the layout referance, and not the viewport (or is it body / html?). Would love to avoid the position of the red stripe to be a magic number thing, especially for responsiveness ... ...

Cracked Design only in Instagram-Browser

Hey there one wired shit is going on. A customer of me had a strange instagram browser issue. Maybe anybody here can help. Randomly the instagram browser shows his website not responsive (but it is responsive). It happens not regularly and I cannot replicate this problem but customers of him reported it....