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

V3X4TI0US

10/20/2023

CSS text-overflow: ellipsis not working

Hello, I am using grids to layout my elements, so I am controlling the size of the child elements using the parent element. Which results in my child having not specified sizes but have size which has been decided by the parent elements gird properties. Now when I try to apply text-overflow: ellipsis to my #title span or #description span, it does not work. I tried to give fixed size in pixels to the title but it didnt work either....

Neo

10/20/2023

CSS Animation (Safari) is not Working Properly

Hello! 👋🏻 I am facing with an issue happening on Safari, with animation. I don't know why this is happening either. The code looks so clean to me. I have checked dev tools, the animation too but I couldn't control it (I guess it is not supported yet to play / pause animations). Code...

unemployed

10/20/2023

Best resources to learn Accessibility

Recently I have learned about accessibility via LinkedIn learning however on our live project I realized there are much more aria tags, best practices and proper method available to make website accessible is there any best resources available where I can learn about this?

Jus Sus || 💀

10/20/2023

How to make the middle part of this loader transparent

https://codepen.io/stressunfit/pen/MWLgQee Hi, i made a loader but i am facing issue to make the middle part transparent. if i set .inner-circle class same color as background color it looks fine. but i want it to be transparent so that i can show this loader on picture's....

kangalio

10/20/2023

When to use neither Grid nor Flexbox?

I'm a frontend newbie. I read how CSS Grid and Flexbox are the future and replace most legacy CSS hacks. So, in which situations should I use neither display: grid nor display: flex when laying out children items of an element? Or can I just slap one or the other on everything to reduce the amount of fighting with CSS?

sacarima (Class - 50)

10/20/2023

SVG hambuger icon preventing content on the page to display

When I comment out the svg from the html file it still prevents the content from display. The content only displays when I delete it from the html, file. There are no specific styles applied to the svg. I'm wondering what the issue might be.

stealthy

10/20/2023

Clarity in Graphql Codegen

I am trying to generate the typescript types using graphql-codegen cli. as of now every request is fully written. i want to make the repeated subfields as fragments and use them here. but when i do that, the typing is not working properly. Can you please tell what i can do regarding this.

qkyu

10/20/2023

CSS Media Query not Overriding

I have this problem where my media query on specific screen size is not overriding. When I open mg dev tools, there's a strikethrough on my style even though I have the same screen size. I don't understand why there's a strikethrough, I would appreciate any help. Thanks!

BlueBeka

10/20/2023

Tabindex for Button inside Link

I've got this html ```html <a href="example.com"> <button>Label</button>...

raul-barriga

10/19/2023

Next.js click outside together with toggler

I have this component called DateRangerPicker that opens when I click on an input tag's onClick. The input tag's component is outside the DateRangerPicker & not a child of it. I wanted to have a hook to be able to close the DateRangerPicker when I click outside of it while also being able to toggle it close using the same input tag. However, since the input tag is outside the DateRangerPicker, it gets detected as being outside & thus triggers a close followed by setting the state to open DateRangerPicker once again in a flicker. Here's the codesandbox for my use case (it's in Next.js 12): https://codesandbox.io/p/sandbox/loving-fast-hvgh84?file=%2Fsrc%2Fpages%2Findex.js%3A7%2C43...

Zerthz

10/19/2023

Best way to create this effect

I'm trying to create this effect, where the overlapping image is cutting out a part of the underlying image. In this specific scenario you could probably get away with a border? But I'm thinking of using masking or clip path to also learn it better. I've messed around with some before/after pseudoelements but couldn't get it working, and my real question is : Would it be best to just use a svg mask? And apply that? seems like the least hassle after you get the svg created....

Grant

10/19/2023

Two column layout using four divs

Hello, I'm looking for suggestions on how to create the layout attached. Ordinarily this wouldn't cause too many issues. However, I am unable to change the markup and hence need to make this responsive with the following markup. ``` <div class="productcols"> <div class="productcol"></div>...

Boeroe

10/19/2023

Animation changing when i change the font

When i enter the font to my body, my whole animation is changing. How can i stop that? https://codepen.io/Boeroe/pen/mdaNNwX i've tried to add: ...

Boeroe

10/19/2023

How to stop the animation at the end of the h4.

As you can see in the picure my animation keeps running till over h4. How do i stop this at the end of h4. https://codepen.io/Boeroe/pen/mdaNNwX...

Ailen G

10/19/2023

How to position svg that underlines a text properly

I have to get this svg positioned rigth below the text (with a min space between the text and the svg) and it has to follow the size of the text (which changes according to the width of the screen) By now the svg is positioned like this: Html: ` <h2 class="dark-olive-text bolder">...

Boeroe

10/19/2023

CSS not applying

How can i make sure my CSS is applying on: .homepage .textani h4 { font-size: 3.2rem; font-weight: 700;...

Mohammad Arshad

10/19/2023

Can anyone help me with this layout the upper area, the images and the svg vector goes to the button

https://prnt.sc/VqsKAbAJL0Gb

Hamza Naeem

10/19/2023

Dropdown menu issue

The problem is, when I hover over the product link on a large screen > 1000px width, the dropdown works and shows the menus but when I reduce the screen width to <1000px and click the product link and dropdown is showing menus, it is also working fine, and now is the problem when I again go to the larger screen, and then hover over the product link, now it's not working, it is only working if I click on the product link. but I want to show dropdown menus using hover over, on screens with a width >1000px. how to solve it https://codepen.io/hamzacodepen951/pen/mdaNoME...

ZrizzyOP

10/19/2023

I wanna make a span inside the html code, and make it changeable in js, only some editable

I wanna make a command-line like part of my CHARITY escape room. codepen: https://codepen.io/Zrizzy/pen/LYMwqJM...

Sora

10/19/2023

Bootstrap 5.3 Override $primary in darkmode

I want to add dark mode support to my project. The problem I am experiencing now is that my main primary color #6174dd is being applied to bg-primary in dark mode and it's not pleasant on the eyes. I tried overriding primary-bg-subtle-dark, but that does not seem to be doing anything. ```scss @import '~bootstrap/scss/functions'; ...

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