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

Basic Turnstile question

If anyone has used it before, have you come across it intermittently rendering?

I want to change the point of rotation of a div. How to do that?

Basically I want to create something like a disco lights. I have a triangle which i want to rotate but its rotational point should be fixed at the top. I tried transform-origin but that is not giving me the expected results. I have a code pen. Please let me know how this can be done. https://codepen.io/kashyaprajan11/pen/xxaVbYw?editors=1100...

How do I get these linear-gradient? (Header BG and Inside of the circle with number)

my codepen: https://codepen.io/DovahTheKiin/pen/oNPxgWx I'm having trouble matching those linear gradients. All the colors needed are in codepen css named "gradient"....

How can I stop a parent from growing when font size increases?

I've figured out how to make my navbar links to grow in size when hovered or focused on, but the other navbar links shift right and the navbar gets too tall when the font size increases. How can I do this? Thanks

What If...

What if I do, ```js setInterval( () => { setTimeOut( () => {...

Shouldn’t the border radius which is set as “border-radius: 100vmax;”change when viewport changes?

1. Picutre is the button in smaller frame. But it stays stable. How? Did I miss anything? Kevin's code: https://github.com/kevin-powell/fem-manage-landing-page-part-4 2. Kevin’s twet: “Something like 100vmax border-radius for pill shapes, or 100vmax box-shadows that will take up the entire viewport with no overflow issues…”...

Auto select country flag when country code is provided

I am working on a project and it is required I implement a functionality that allow users to provide their phone number in an input tag with the country code and immediately the country code is provided then the flag of the country appears respectively. Is there a library I can use to achieve this or an API?...

Change bg color for the mobile version

Hi, it's about this page: https://www.ohvaz.ro/blog/budinca-de-chia-tot-ce-trebuie-sa-stii/ the mobile version. I wanna remove some of the padding so people can have an easier time reading it. Trouble is - I have this grey/pink background color. I'd like to remove it, BUT only for the mobile version and only for the blog. Not for the rest of the website. I'm a beginner. How can I achieve that with minimal changes? Thank you!...

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