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

How do I structure the HTML for this?

I'm not able to decide how to proceed with the HTML sturcure. If I use left wrapper for headings and right wrapper for description , in mobile view these two wappers are switching to single wrapper with heading and description on top of each other. Should I hide the hide the headings in desktop and make them visible in mobile?...

How can I create this layout?

I want to have a layout which in desktop has 2 columns on the left side there are some texts, fields and is a submit button, on the right side just some texts but I want on small screen to have just one column where the right column would go between the texts and submit button of the left side, In this example I can't make the button go right below the red section and not have all that space in between. Here is also the link to the sandbox https://codesandbox.io/s/peaceful-pare-jttq33?file=/src/styles.css...

Rating stars on svg

Good day! wanted to know how to fix svg rating issue. 1) Filling the stroke with a different color than specified in the styles 2) Clipping stroke along with the star 3) The offset of the gradient is different from the example with 5 stars https://codepen.io/Mister-Eighth/pen/KKGgPPp...

Keep rotated object inside parent on X axis

Hi all. I'm struggling with this rotated DIV inside it's parent. On the Y axis it's okey for the child to overflow. But on the X axis I want the child to stick to the right border. How can I achieve this? https://codepen.io/commproNL/pen/gOBMeNX...

How to create restrict absolute positioned element from leaving grandparent's boundary?

I have an element that displays a value range and a text bubble above it that communicates where the value lies in the range. When the value is in the middle of the range, I would like the text centered on its pointer and if it is near the edge, I would like the text to shift to contain itself within the grandparent's boundary. How can I contain the grandchild within the grandparent's boundary? This is what I have so far. I can get what I need it to do until the value is near the boundaries where I need the text to be off-center of the arrow ```...

position of a div moves when zoomed out even though its is offset by another div via js

SO i wanted to postion this div with respect to another div, so i used getBoundingClientRect() to get the refernce div and offsetted it by px , now im having issues where when i zoomed out its not next to the reference div, how do i fix this? ```JS const teamMembermodal = document.querySelector(".card-member");...

How do you make middle click NOT open a new tab (so I can avoid it)

I notice this a lot on health insurance search results: you search for a doctor and get a list of cards back. I want to be able to middle click each card that seems interesting then look at the details on a second pass. On most websites, this middle a new tab but on these websites it has no effect; the only option is to click one card at a time, changing the entire page, and if it isn't what I was looking for, the back button usually doesn't function correctly and I have to reenter the search. How do you build this behavior? I'm only asking because I want to figure out how I can turn it off with a user script. If the answer is, "it depends on the site," here's a specific example: https://www.techjobsforgood.com/jobs/?job_function=Engineering...

Outline gets cutoff when focused

(CodePen for context: https://codepen.io/BravoLima2k4/pen/qBJNKry) Whenever I focus on a nav link the outline gets cutoff on the top, bottom and on the left on the last link. Also I have another question, and I didn't want to unnecessarily clutter the channel:...

Javascript In astro

I used my javascript in script tag inside astro. But it's showing me red underlines but the code works fine and shows no error in the javascript. What's the reason. On hover it says Property value doesn't exist on type "Element". It's happening for .click .key .value .style Something it doesn't show underline and appears out of no where. ```js...

CSS Layout Issue on different browsers

Hey! I have made a masonry layout in CSS in a React project using the column property. It looks perfect on Firefox but not on other browsers. What could be the issue? Live Site: https://my-unsplash.fly.dev/ Code: https://github.com/husnain214/my-unsplash ...

How to change position reference?

I have a modal with backdrop. so i used position relative to the backdrop and abs to modal to fit in the center. Now i have another popup which is inside the modal. note there are few position relative parent inside the modal, so i cant use position abs. How to change reference point so i can use position from backdrop. as you can see the popup is being added to the parent relative postion which is cause scroll in x direction, i want it to pop above the modal...

Proper way to scale text/max width with flexbox

What is the proper way to scale text i feel like using vw isn't a good way. How do i make it so my objects inside my block is filling the entire width and scales everything the width/text so it keeps fitting

How important is GitHub knowledge?

I am at a point we’re I feel very confident in making projects to use in a portfolio. How important is using GitHub in a more proper way when potential jobs look at it(if they even do)? As of now I just update the project repo when I’m down for the day....

Not able to overflow divs

https://codepen.io/ahad4387/pen/LYgNgqK I'm trying to achieve a slider of the containers. for that, we'll need to overflow the parent .splide__list div. Tried using inline-block on .grid-container and .picture-container, didn't work...

disable background color of text when copy pasting

Anyone know how to disable text background color when copy pasting ?

Is styling disabled input box different for mobile?

So I styled the disabled for my input and it seems to be working fine on desktop. When I look at it on mobile it has default setting. Reference of the project I’m working on ...

Help with customizing file upload. File upload popup not showing after using display none on input

Im having issues where file upload popup is not showing when i used display none on input. i saw few tutorials and tried to replicate but didnt work out. can someone find where the issue is ...

TsParticles, Astro and Svelte

I'm trying to use tsparticles within a svelte component, but even with a client:load, it doesn't work? I must be missing something. I've tried ts-particles astro, but it doesn't seem to work. Are there any examples? Here's the current repository. https://github.com/Lofty-Brambles/alpha_esports/tree/main/src...

modifying Array and outputting the modified version

I want to output all the arrays with modified version, I want to put ? in the end of usernames and ! in the end of items ```const array = [ { username: "john", team: "red",...

Locomotive-scroll

Hi everyone Please somebody I had locomotive scroll on my website now chrome browser freeze when I m browsing on the site on firefox the locomotive script don't work . can I get some idea please ?...