Kevin Powell - Community


Kevin Powell - Community

A friendly place for developers to meet other devs, ask questions, get help, and just have a good time ๐Ÿ™‚.







Good way to learn more css

Do not know if it's a question for here but with a CLR challenge , can it be wise to use the html has and just get busy with the css On one challenge I do not know if I use the right html structure...

display: table;

Hey, are there any tips and tricks worth knowing for display: table; where it's used out of the context of a table, just like grid is used to center things? Thanks in advance

Drag and Drop API flickering issue

Hey, I'm, facing flickering issues with drag and drop API, I've realized onDragleave also triggers when drop-area's onDrag event enters or leave its children too which is causing the problem. I also can't set pointer-events: none as I've some handlers in children components. Two things which are causing flickering: -> When a image is uploaded or dropped it causes re-render due to useState. -> When dragLeave & dragEnter ...

Responsive nav sidebar overlapped problem with ScrollReveal.js

Is anyone here familiar with ScrollReveal? I used it to create cool transition effects on my website, but I'm facing an issue where my responsive navbar is getting overlapped by my content. I've already tried using position: fixed and giving it a z-index of 999, and I also added !important, but it still looks like the navbar is being overlapped. heres the codepen link:
No description

horizontal scrollbar above the scrolling element ?

Hi guys, Is there a way to have the horizontal scrollbar above the scrolling element ?...

Table of contents in a separate document: yay or nay?

Apart from large, wide screens where it can reside in the margins, I find a TOC very intrusive when it's inlined in the document and absurdly complex to manage as a modal in the DOM for what it provides. What's everyone's opinion on simply making the TOC its own (non-indexed) document, and just link to it from a regular <a rel="contents nofollow" href="./toc.html">Table of Contents</a> link? I can see only pros: no need for a modal, navigation preserves scroll positions naturally, transitions are still possibleโ€ฆ...

tables | col & colgroup

Hey, how do the col and colgroup tags work? It's not too clear too me, i'd appreciate any explanation, thanks in advance.

How can I set an input box to be responsive to user input?

I want the input box for the whole number to be small, like the size of one number because that's what will most often be typed in. But if the user does type in more than one number, I would like the box to grow so their whole number is displayed. I've tried using clamp, flex-grow/shrink/basis but nothing is working. I think those things only make it smaller at smaller screen sizes. I have the width set to 80px because that's the only way I've found to make it not obnoxiously big.
Deployed Project: Github:
No description

Is it possible to change styling of parent when hovered over child element in CSS?

The only way I know is using JS, in which I listen for hover on child element and change the parent styling in the function ( or by adding classnames), but is it possible by just using CSS selectors I want something like this: body { display: grid; grid-template-columns: 1fr 1fr;...

relative color syntax doesn't work with light-dark()?

My color palette is defined using light-dark(), e.g.
--bg-1: light-dark(var(--l-bg-1), var(--d-bg-1));
--bg-1: light-dark(var(--l-bg-1), var(--d-bg-1));

Looking for help.

Hi, would anybody here be willing to hop on a call with me and gave me some tips on how to improve my website css mainly responsivity. I would provide my website code on github. I found my self stuck and I dont know what to do. My code is a mess and I would be gratefull for som tips.

Slider Animation Glitch ๐Ÿ†˜

I have a minor but noticeable glitch in my testimonial slider that I'm hoping to resolve. You can view the issue here: Youโ€™ll notice that while looping through the slides, thereโ€™s a brief appearance of James between the transitions of Tanya and Johnโ€™s testimonials. Check out the glitch at the end of the attached video....

responsive layout issue

Hello why could be the reason when i reach some amount of like 900 px in screen my layout is messed up it was really good till recentlyyy
No description

What's the downside to using custom (non-registered) elements?

Things like <foo>, <bar> etc just behave like <div> and can be styled based on tag name instead of classes. Is there any downside, really?

How to use curve fitted functions to eliminate media queries

Hello! I'm trying to eliminate media queries for setting font-sizes across diff widths. So as an example I want the font-size: 12px @ 320px width, 14px @ 768px width and so on till a max of 18px @ >= 1366px width...

A11Y skip-to-content jumps over main navigation โ€”how to navigate, then?

Something I find confusing: if skip-to-main content is the first thing on a page, and it jumps over any navigation bar to go directly to the main content, how is someone using assistive technology ever made aware that the navigation links exist?

Container queries: are "em" units computed using container ems or contained ems?

In @container (width > 15em), whose em is the width in? I think it's in contained ems (i.e. those of the current element), as it seems the alternative wouldn't make any sense, but I can't find any confirmation.

left floated image with sourronding divs

I hope my question is not (too) silly. ๐Ÿ™‚ I would like to create a product page with an image and several divs with infos. The picture on the left side and the divs on the right until they have enough space. If the space runs out, the remaining divs go under the image (and the other divs in the second column). So 2 columns. Image in the first. Divs in the second. Remaining divs under the 2 columns in one column. I need the whole thing to be dynamic. So I don't know how many divs i will have and how much content they have. Can I do this?...

Make Tailwind Desktop First

I have set my tailwind configuration to be desktop first: ``` screens: { xl: { max: "1279px" },...

box tow column

how to create exactly like this maybe without using hr is possoble?
No description