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

help

roelof

7/21/2024

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

snxxwyy

7/21/2024

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

! Bazinga

7/21/2024

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

bucz

7/21/2024

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: https://codepen.io/BuCzTV/pen/VwJaVvE...

Thierry

7/21/2024

horizontal scrollbar above the scrolling element ?

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

jcayzac

7/21/2024

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

snxxwyy

7/20/2024

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.

Julianna

7/20/2024

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: https://mathvisuals.netlify.app/frac-div Github: https://github.com/mathematiCode/Math-Visual-Library...

mhk

7/20/2024

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

jcayzac

7/20/2024

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));

...

Gamenait

7/19/2024

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.

kerekiwere

7/19/2024

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: https://kerekiwere.github.io/bootcamp-testimonials-slider/. 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....

anes039

7/19/2024

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

jcayzac

7/19/2024

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?

Amz

7/19/2024

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

jcayzac

7/19/2024

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?

jcayzac

7/19/2024

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.

fisha

7/18/2024

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

Nibelung Valesti

7/18/2024

Make Tailwind Desktop First

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

Justine

7/18/2024

box tow column

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

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