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

Brightie

11/25/2024

flex box aint wrapping

can anyone tell me why my flexbox isnt wrapping even tho wrap is defined

Jono Lewarne

11/25/2024

Best way to align captions with varying width images?

I've got a layout where I want the captions to always be aligned with the left edge of the images, which can vary in orientation and aspect ratio. What's the best markup and css to achieve this? I've tried setting the parent container of the image and caption as a flex box set to width fit-content but it's buggy and causing other issues so I'm wondering if there's a nicer way that my brain can't figure out. Ideally the captions will align horizontally but I'm willing to sacrifice that in order t...

Shayokh

11/25/2024

Responsive image based on text size

On https://dennissnellenberg.com/ portfolio, the text in the footer section is responsive. However, the image right next to it somehow matches the height of the responsive text. How to replicate that?

Faker

11/25/2024

What is the purpose of blobs in JavaScript ?

Hello guys, I recently ran across the term "blob" in javaScript. I know it stands for 'Binary large objects' but concretely, what does it mean, why is it useful? Every files are stored as blobs? why? What is its usage?

i_lost_to_loba_kreygasm

11/25/2024

Can someone help me integrate tailwind in my react vite project ?

I followed the docs from tailwind but the utility classes don't show up at all

empty

11/25/2024

visibility does not work

Hi guys, I have a simple list, when I click on an item of the list I want to display the icon of that item and hide other icons. I toggle the value of visibility from hidden to visible but the icon does not display as I expected. It works when I use display instead of visibility. Can anyone help me explain why?

Faker

11/24/2024

What is the purpose of the instance of FormData?

Hello guys, sorry to disturb you all; I have just learnt about FormData. I know it is mostly used for file uploads. But I don't understand how does it work, like sometimes peiple use an instance of FormData like formData to append something. For e.g: formData.append('name', value) I don't understand when do we use this formData.append ? Sometimes the form element reference is passed directly into the FormData constructor and we no longer need it... I'm a bit confuse of how it work, what if we need to upload multiple files for e.g....

Zempai

11/24/2024

CSS – Selecting attributes by wildcard name

I wonder I wonder ... Select elements by their attribute, not their value, but have it be a wildcard Mayhaps input[*data-attribute] or input[^data-attribute] selecting data-attribute, data-attribute-foo, data-attributered, etc. ...

Ivо

11/24/2024

Is @media hover broken when using Windows Tablet mode?

Wrapping hover styles in a @media (hover: hover) and (pointer: fine) or similar is a nice way to stop hovers on touch devices, as when you hold your finger for about a second hovers work there as well. However, a friend told me a user on their site noticed that hovers stopped working for them (using the media query above). So I did a little testing to find out why and the results were interesting. I used this codepen https://codepen.io/dukecroc/pen/dyzjmBB and these are the results https://prnt.sc/JPIpAtOHej7o ...

smackalpha

11/24/2024

Creating a custom shape

i am creating a custom shape. I created but got issue in border. can some one help me. I have attached design image and my output. boders not working well. please help me codesandbox link: https://codesandbox.io/p/sandbox/shape-nltk44?file=%2Fsrc%2FApp.js code: import { Box, Stack, styled, Typography } from "@mui/material";...

snxxwyy

11/24/2024

nodes in js

Hey, i hear "nodes" floating around when people talk about certain things in js. But what exactly are they and how do they differ from elements? There are some methods that are for nodes and some that aren't e.g. parentElement and parentNode and it seems pretty confusing since they at first sight seem to be doing the same thing? I'd appreciate any info, thanks in advance....

Dovah

11/23/2024

Fixed element not scrollable when resizing mobile screen?Bottom of the screen is eating the element.

So I have this element that is like a confirmation of order that pops when you are done and is fixed positioned. However, when I resize mobile view to smaller screen, vertically, it slowly stats disappearing from the bottom up and is not scrollabe. Element CSS: ```css .order-confirmed {...

snxxwyy

11/23/2024

dataset vs regular data methods.

Hey, what's the difference between using dataset and regular data methods such as setAttribute? I know there's more to dataset but i can't figure it out. The only thing i see with dataset is you can list all attribute names and values and have them put in an object but can't you also get attributes with .attributes and .getAttribute? And for setting them rather than doing element.dataset.xyz = "xyz" can't you use setAttribute ?...

Dylan

11/23/2024

Assigning Homework like Google Classroom

Hello, I would like make a web app which is like Google Classroom which allows me to assign homework which studetns can access and submit it digitally by uploading a word/powerpoint document. How hard would this be for a beginner?...

Faker

11/23/2024

Why don't we need to reset variables outside media queries

Hello guys, sorry to disturb you all. ```CSS :root { --bg-color: rebeccapurple;...

Shayokh

11/23/2024

How to do this text inversion?

I came across this UI on Awaards site. The text color seems to react to it's background. How can I replicate something like that in Tailwind?

brick wall

11/23/2024

need that image take whole rightside and be responsive on mobile

<div class="section about-company" id="about"> <div class="container-fuild padding-upper"> <div class="row gx-4 align-items-center "> <div class="col-md-6 about-text d-flex justify-content-center">...

Kivory

11/23/2024

Decreasing window width (of browser) causes <body> to stop stretching to fit the entire page?

I have a <header> and it stays stretched as regular, but my <body> has an almost... margin that isn't really a margin on its right for some reason. Pictured is two screenshots of the <header> being highlighted and the <body> being highlighted layered on top of eachother to show what I mean. You'll notice the <body> for some reason has empty space on its right. I tried giving both <body> and <html> width: 100%; but it didn't work....

YN20

11/23/2024

Pure CSS and HTML Creating Layout and naming elements

Hello I have been starting to use pure CSS more often recently and I want to know if there is a specific guideline used when creating the structure, for example if we use bootstrap we have the order of container>row>col l like that. Is something like that needed here.? Secondly, when we are writing, is it good to write CSS for all rows and columns generally or style each row with its own unique class.? Thank you...

MC23

11/23/2024

Best strategy for light/dark theme using light-dark() function

I'm experimenting with the new light-dark() function and I was looking for ideas on how to better implement the various colours. This is my current implementation: ```css :root { /* text */ --l-text-color: #1a1c20;...

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