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

overflow-x on the body element does not work

Hey! I have been working on this project: https://64401877a3e55700863fec85--super-daffodil-7196e0.netlify.app/ (You should view it in responsive mode at 375px preferably to see the issue)...

position fixed and width of element

I am struggling with the width of my element which makes website background blurry. I created animation with p5js and wanted to blur it, so I added a div which covers the entire page using this code: ```css #app { display: grid; flex-wrap: wrap;...

whats wrong with this. background-color: rgba(var(--label-blue), 0.2);

i saw this type of code in stackoverflow and thought it was a best idea to implement it in my project but for someone reason its not working. browser support is limited or did i made mistake somewhere ?...

How to fix outline overlap?

HTML ``` <div> <button>A</button> <button>B</button>...

QUICK poll on multiple class names for same element

quick poll guys. recently i have been using multiple classes for same element eg <div class= "parent flex fd" > where flex and flex-direction properties are defined on css. the idea was to reduce the coding by reusing properties like bootstrap. someone said its really bad practice and you have give each properties on css so some other developer wont have to suffer Anyone else does stuff like this?...

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 ?